jq操作select集合

jq操作select集合

时间：2012年12月07日分类：Javascript

最近一段时间发现，老是要跟select，option相关的东西打交道，而且有的时候还会搞错，于是，抽了一点时间整理了一份使用jq库来操作select的一些事件及方法，供大家参考。

html代码：

?

1 2 3 4 5 6 7 8 9

<</code>select id="selectTest" name="selectTest"> <</code>option value="请选择">请选择</</code>option> <</code>option value="1">11</</code>option> <</code>option value="2">22</</code>option> <</code>option value="3">33</</code>option> <</code>option value="4">44</</code>option> <</code>option value="5">55</</code>option> <</code>option value="6">66</</code>option> </</code>select>

获取Select：

获取select选中的text

$('#selectTest').find('option:selected').text();

获取select选中的val

$('#selectTest').find('option:selected').val();

获取select选中的索引

$('#selectTest').get(0).selectedIndex

设置Select：

设置select选中的text

var text = "66";

var count = $("#selectTest option").length;

for(var i = 0; i < count; i++){

if($("#selectTest").get(0).options[i].text == text){

$("#selectTest").get(0).options[i].selected = true;

break;

}

}

设置select选中的value

$("#selectTest").find('option:selected').attr("value","Normal");

$("#selectTest").find('option:selected').val("Normal");

$("#selectTest").get(0).options[0].value = "Normal";

设置select选中的索引

$("#selectTest").get(0).selectedIndex = index;//index为索引值

设置select option项

$("#selectTest").append("< option value='Value'>Text< /option>"); //添加一项option

$("#selectTest").prepend("< option value='0'>请选择< /option>"); //在前面插入一项option

$("#selectTest option:last").remove(); //删除索引值最大的Option

$("#selectTest option[index=0]").remove();//删除索引值为0的Option

$("#selectTest option[value='3']").remove(); //删除值为3的Option

清空 Select

$("#selectTest").empty();

$("#selectTest").children().remove();