jQuery操作select

最新推荐文章于 2025-08-04 10:59:30 发布

原创最新推荐文章于 2025-08-04 10:59:30 发布 · 1.3k 阅读

CC 4.0 BY-SA版权

文章标签：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script>

   $(function(){
       //获取第一个option的值
       var firstval=$('#selectID option:first').val();
       alert(firstval);

       //获取最后一个option的值
       var lastval =$('#selectID option:last').val();
       alert(lastval);

       //获取第二个option的值
       var secondval =$('#selectID option:eq(1)').val();
       alert (secondval);

       //获取选中项的值
       var selectedval =$('#selectID option:selected').val();
       alert(selectedval);

       //设置值为3的option为选中状态
       $('#selectID').attr('value','3');

       //设置最后一个option为选中状态
       $('#selectID option:last').attr('selected','selected');
       $('#selectID').attr('value',$('#selectID option:last').val());
       $('#selectID').attr('value',$('#selectID option').eq($('#selectID option').length-1).val());

       //获取select的长度
       var selectlength =$('#selectID option').length;
       alert(selectlength);

       //加入一个option
       $('#selectID').append("<option value='n+1'>第n+1项</option>");
       $("<option value='n+1'>第n+1项</option>>").appendTo('#selectID');

       //删除选中项
       $('#selectID option:selected').remove();

       //删除第一项
       $('#selectedID option:first').remove();

       //指定值被删除
       $('#selectedID option').each(function(){
           if($(this).val()=='3'){
               $(this).remove();
           }
       });


   })
</script>
</head>