select下拉框之JS/JQuery详细操作

下拉框的操作一直是我比较困扰的地方，以下将分别对js和jquery的操作进行比较性的说明。总结中也学习到了一些JQuery方法的使用技巧。

 

var sel_obj = 下拉框DOM对象

var $sel_obj = 下拉框JQuery对象

 

一、移除

---

 

1. 移除所有项：

　　sel_obj.options.length = 0;

 

　　$sel_obj.empty();

“.empty()” 从被选元素移除所有内容，包括所有文本和子节点，保留其在dom中所占的位置

 

2. 移除下拉框中的一项：
　　sel_obj.options.remove(index);　

“index”为下拉框选项的索引值，若0索引项移出（自上而下），那么1索引项的索引会变为0，后面的索引依次向前推进

　　移除所有项：（注意：倒循环）　　

for(len=sel_obj.options.length, var i=len-1, ;i>=0;i--){

    sel_obj.options.remove(i); 
}

 

　　$sel_obj.find("option").eq(index).remove();

“.remove()” 从被选元素移除所有内容，包括所有文本和子节点，不保留其在dom中所占的位置，这点与“.empty()”有所区别

 

二、添加

---

 

　　sel_obj.options.add(new Option("text", "value"));

“text”为下拉框选项的显示文本，“value”为下拉框选项的值，在下拉框末尾添加，索引值最大

 

　　$sel_obj.append("<option value='value'>text</option>");

　　$sel_obj.prepend("<option value='value'>text</option>");

“.append()”在下拉框末尾添加，添加后此项索引值最大； “.prepend()”在下拉框的首部添加，添加后此项索引值为0

 

四、获取

---

 

1. 获取下拉框选中项的值：
　　sel_obj.options[sel_obj.selectedIndex].value;

 

　　$sel_obj.val();

 

2. 获取下拉框选中项的文本：
　　sel_obj.options[sel_obj.selectedIndex].innerText;

 

　　$sel_obj.find("option:selected").text();

“option:selected”为选中项，“option:first”为首项（索引值为0），“option:last”为末项（索引值最大）

 

3. 获取下拉框选中项的索引：
　　sel_obj.selectedIndex;

　　$sel_obj.prop("selectedIndex");

“.prop()”应该被用来处理boolean attributes/properties以及在html(比如：window.location)中不存在的properties。其他所有的attributes(在html中你看到的那些)可以而且应该继续使用“.attr()”方法来进行操作。

 　　例如：

<select id="selId">
    <option value="a">AAA</option>
    <option value="b">BBB</option>
    <option value="c">CCC</option>
    <option value="e" selected="selected">EEE</option>
</select>

　　结果为3。

 

五、判断

---

 

1. 判断下拉框是否选中：

　　sel_obj.selectedIndex > -1 ? //选中 : //没有选中;

 

　　$sel_obj.prop("selected") ? //选中 : //没有选中;