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

一、js 操作select 下拉框

---

 

var selObj = 下拉框对象

1. 移除所有项：
selObj.options.length = 0;

 

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

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

也可利用循环，移除所有项：

var length = selObj.options.length;

for(var i=length-1;i>=0;i--){

    selObj.options.remove(i);
}

 

3. 移除下拉框的选中项：
selObj.options[selObj.selectedIndex] = null;

“selectedIndex”为下拉框选中项的索引值，“options[index]”这里也是获取下拉框索引值=index的选项

 

4. 添加下拉框选项: 
selObj.options.add(new Option(text, value));

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

 

5. 修改下拉框选中项：
selObj.options[selObj.selectedIndex] = new Option(text , value);

 

6. 获取下拉框选中项的值：
selObj.options[selObj.selectedIndex].value

 

7. 下拉框是否选中：
selObj.selectedIndex > -1 ？ //选中 ：//没有选中

 

 

二、jQuery 操作select 下拉框

---

 

var selId = 下拉框对象ID

1. 获取指定下拉框选项：
$("#selId").find("option:selected");

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

  $("#selId option[value='xxx']")；

获取下拉框选项值为“xxx”的选项

//$("#selId option[text='xxx']");
//$("#selId option[index='x']");

以上2种方法测试后，均返回Object，但.val()方法返回undefined，.text()方法返回为空，.attr("selected", true)方法更无效果，建议不要使用！！

 

2. 获取下拉框选中项的文本：
$("#selId").find("option:selected").text();

 

3. 获取下拉框选中项的值：
$("#selId").val();

 

4. 获取下拉框选中项的索引：
$("#selId").get(0).selectedIndex;

“get(0)”即获取选中项

  例如：

<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。

 

 

5. 设置下拉框的选中项：
$("#selId").get(0).selectedIndex = index;

设置下拉框中选项的索引值=index的项为选中项

$("#selId").attr("value","xxx“);
$("#selId").val("xxx");
$("#selId").get(0).value = "xxx";

以上3个方法都是设置下拉框中选项的值=“xxx”的项为选中项

 

 

6. 添加下拉框选项:
$("#selId").append("<option value='Value'>Text</option>");

$("#selId").prepend("<option value='Value'>Text</option>");

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

 

 

7. 移除下拉框选项：
$("#selId option[value='xxx']").remove();

移除下拉框选项值为“xxx”的选项

 

 

8. 清空下拉框所有选项:
$("#selId").empty();
$("#selId option").remove();

<script type="text/javascript"> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>