jQuery select下拉選單的相關操作

admin發表於2017-03-01
select下拉選單是最為常用的表單元素之一,下面就介紹一下如何使用jQuery操作select下拉選單。

一.獲取選中option項的文字值:

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

二.獲取選中option項的value值:

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

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

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

四.設定選中option項的索引值:

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

五.設定選中option想的value值:

[JavaScript] 純文字檢視 複製程式碼
$("#theselect").attr("value","Normal");
$("#theselect").val("Normal");
$("#theselect").get(0).value=value;

六.設定option的一些其他操作:

[JavaScript] 純文字檢視 複製程式碼
$("#theselect").append("<option value='Value'>Text</option>");//新增一項option
$("#theselect").prepend("<option value='0'>請選擇</option>");//在前面插入一項option
$("#theselect option:last").remove();//刪除索引值最大的Option
$("#theselect option[index='0']").remove();//刪除索引值為0的Option
$("#theselect option[value='3']").remove();//刪除值為3的Option
$("#theselect option[text='4']").remove();//刪除TEXT值為4的Option

七.清空select下拉項:

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

相關文章