分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow

也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！

               

一、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" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>           

給我老師的人工智慧教程打call！http://blog.csdn.net/jiangjunshow