jquery如何操作select下拉選單

由於select下拉選單使用頻繁，所以下面就總結一下jQuery對select下拉選單操作的一些常用用法，希望能夠對需要的朋友帶來一定的幫助，下面是用法的一些羅列:

用於演示的select例項:

[HTML] 純文字檢視 複製程式碼
<select id="mytest" name="mytest">
  <option selected>螞蟻部落</option>
  <option selected>努力奮鬥才有前途</option>
  <option selected>開始行動</option>
  <option selected>執行力要強</option>
</select>

一.獲取選中的option的text（文字值）值:

[JavaScript] 純文字檢視 複製程式碼
$("#mytest").find("option:selected").text();
$("#mytest option:selected").text();

二.獲取選中的option的value屬性值:

[JavaScript] 純文字檢視 複製程式碼
$("#mytest ").val()

三.獲取選中的option的索引值:

[JavaScript] 純文字檢視 複製程式碼
$("#mytest ").get(0).selectedIndex

四.獲取option的數量:

[JavaScript] 純文字檢視 複製程式碼
$("#mytest").get(0).options.length

五.設定選中的option的索引值:

[JavaScript] 純文字檢視 複製程式碼
$("#mytest").get(0).selectedIndex=2

說明:設定了索引值之後option選項的位置也會發生改變。

六.向select中新增一個option項:

[JavaScript] 純文字檢視 複製程式碼
$("#mytest").get(0).options.add(new Option("小小螞蟻",6))

七.刪除select中的某一項:

[JavaScript] 純文字檢視 複製程式碼
$("#mytest").get(0).remove(2)

以上程式碼刪除索引值為2的option。