jQuery: 操作select option方法集合

每一次操作select的时候，总是要谷歌一下资料，真是太不爽了, 在这里记录一下。

 

公共select代码

<select id="sel">
  <option value="gideon">gideon</option>
  <option value="lisha">lisha</option>
  <option value="samuel">samuel</option>
  <option value="nathan">nathan</option>
  <option value="noah">noah</option>
  <option value="ikeepstudying">ikeepstudying</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='nathan']").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()=="ikeepstudying"){
       $(this).attr("selected", true);
    }
});

 

jQuery中select联动

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

 

jQuery中select排序 ( 参看: DEMO )

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
//, attr, order

var sortSelect = function (select, attr, order) {
    if(attr === 'text'){
        if(order === 'asc'){
            $(select).html($(select).children('option').sort(function (x, y) {
                return $(x).text().toUpperCase() < $(y).text().toUpperCase() ? -1 : 1;
            }));
            $(select).get(0).selectedIndex = 0;
            e.preventDefault();
        }// end asc
        if(order === 'desc'){
            $(select).html($(select).children('option').sort(function (y, x) {
                return $(x).text().toUpperCase() < $(y).text().toUpperCase() ? -1 : 1;
            }));
            $(select).get(0).selectedIndex = 0;
            e.preventDefault();
        }// end desc
    }

};

//, attr, order
$(document).ready(function () {

    $('#btnSort').click(function (e) {

        sortSelect('#ddlList', 'text', 'asc');

    }); // event listener click

});
</script>

<select id="ddlList">
    <option value="3">Three</option>
    <option value="1">One</option>
    <option value="1">one</option>
    <option value="1">a</option>
    <option value="1">b</option>
    <option value="1">A</option>
    <option value="1">B</option>
    <option value="0">Zero</option>
    <option value="2">Two</option>
    <option value="8">Eight</option>
</select>
<input type="button" id="btnSort" Value=" Sort Dropdown By Text " />

 

参看: DEMO

 

 

更多参考:

jQuery: 插件开发模式详解 $.extend(), $.fn, $.widget()

jQuery: 选择器(DOM,name,属性,元素)

AngularJS jQuery 共存法则

jQuery实现多条件筛选

 

 

原文: jQuery: 操作select option方法集合