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方法集合