[jQuery]操作select方法集合

jQuery操作select元素在项目开发中经常遇到,我也是经常在碰到这样的操作的时候也要查查资料,主要是关于select的知识还是很多的,比如html的select静态结点的赋值、取值,post异步加载的select带选项的赋值、取值,select选中元素改变后的操作等等。在这里总结一下,本来准备在jsFiddle上把这些例子都写一遍的,结果网络不给力,外国的好东西也都要被墙,很无奈,大家可以在使用过程中测试吧。

html的select元素

<select id="sel">
  <option value="交通">交通费</option>
  <option value="住宿">住宿费</option>
  <option value="招待">招待费</option>
  <option value="邮寄">邮寄费</option>
  <option value="其他">其他费</option>
</select>

jQuery对select的取值

//获取第一个option的值
$('#sel option:first').val();

//最后一个option的值
$('#sel option:last').val();

//获取第二个option的值
$('#sel option:eq(1)').val();

//获取选中的值
$('#sel').val();
$('#sel option:selected').val();

//获取选中项的显示的文本值
$("#sel").find("option:selected").text();

//获取select的长度
$('#sel option').length;

//获取Select选中的索引值
$("#sel").get(0).selectedIndex;  

//获取Select最大的索引值
$("#sel option:last").attr("index");

jQuery对select的赋值

//设置text为pxx的项选中
sel.find("option[text='邮寄费']").attr("selected",'selected');

//设置值为2的option为选中状态
$("#sel").val(2);   
$('#sel').attr('value','2');

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

//设置Select索引值为1的项选中
$("#sel ").get(0).selectedIndex=1;  

//设置Select的Text值为jQuery的项选中
$("#sel option[text='jQuery']").attr("selected", true);   

//设置select的value值为1时被选中
$("#sel option[value='1']").attr("selected", true);

select的事件

//为select添加事件,当选择其中一项时触发
$("#sel").change(function(){... });

jQuery操作select的方法

//为Select追加一个Option(下拉项)
$("#sel").append("<option value='Value'>Text</option>");

//为Select插入一个Option(第一个位置)
$("#sel").prepend("<option value='0'>请选择</option>");

//删除Select中索引值最大Option(最后一个)
$("#sel option:last").remove();  

//删除Select中索引值为0的Option(第一个)
$("#sel option[index='0']").remove(); 

//删除Select中Value='3'的Option
$("#sel option[value='3']").remove();  

//删除Select中Text='4'的Option
$("#sel option[text='4']").remove();  

//循环select的option选项
$("#sel option").each(function(){
    if($(this).text()=="住宿费"){
       $(this).attr("selected", true);
    }
});

jQuery中select联动

//select 的 联动
$(".selector1").change(function(){
     // 先清空第二个
      $(".selector2").empty();
     // 实际的应用中,这里的option一般都是用循环生成多个了
      var option = $("<option>").val(1).text("pxx");
      $(".selector2").append(option);
});

分享到:更多 ()

抢沙发

评论前必须登录!