jQuery操作select下拉選單程式碼

select下拉選單是網頁中常用的表單元素之一，那麼對於它的操作是必須要掌握的技能，下面就簡單分享一下如何使用jQuery操作下拉選單，希望能給需要的朋友帶來或多或少的幫助。

html的select下拉選單程式碼:

[HTML] 純文字檢視 複製程式碼
<select id="sel">
  <option>-請選擇-</option>
  <option value="1">螞蟻部落</option>
  <option value="2">div+css專區</option>
  <option value="3">jquery專區</option>
</select>

下面就對上面的select下拉選單進行操作。

1.獲取選中項的文字值:

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

2.獲取選中項的value值:

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

3.獲取選中項的索引值:

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

索引值是從0開始的。

4.獲取最大索引值:

[JavaScript] 純文字檢視 複製程式碼
$("#sel option:last").attr("index");

索引值是從0開始的。

5.為select下拉選單追加一個option項:

[JavaScript] 純文字檢視 複製程式碼
$("#sel").append("<option value='Value'>新加項</option>");

新加的此項排在最後面。

6.為select下拉選單開頭新增一項:

[JavaScript] 純文字檢視 複製程式碼
$("#sel").prepend("<option value='0'>新增到第一項</option>")

7.刪除最後一項:

[JavaScript] 純文字檢視 複製程式碼
$("#sel option:last").remove();

8.刪除指定索引值的一項:

[JavaScript] 純文字檢視 複製程式碼
$("#sel option[index='idnex']").remove();

所以只是從零開始的。

9.刪除指定value屬性值的一項:

[JavaScript] 純文字檢視 複製程式碼
$("#sel option[value='value']").remove();

10.刪除指定文字值的一項:

[JavaScript] 純文字檢視 複製程式碼
$("#sel option[text='text']").remove();

11.刪除所有的option項:

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