jQuery操作select下拉常用程式碼

admin發表於2017-03-06

能力越大責任越大,已經是大家耳熟能詳的名言了,意思誰說如果哪個人比較有能力,那麼它承擔的責任也就多,在網頁中也是如此,select下拉選單就是能力較強的表單元素之一,所以select被使用的頻率就高,當然作為程式設計師的我們就要熟悉對它的操作,下面就分享一下jquery物件select下拉選單的常用操作。

一.刪除和新增option項:

[JavaScript] 純文字檢視 複製程式碼
$("#sel").append("<option value='Value'>Text</option>");//為select追加一個Option(下拉項) 
$("#sel").prepend("<option value='0'>請選擇</option>"); //為select插入一個Option(第一個位置) 
$("#sel option:last").remove();//刪除select中索引值最大Option(最後一個) 
$("#sel option[index='0']").remove();//刪除select中索引值為0的Option(第一個) 
$("#sel option[value='3']").remove();//刪除select中Value='3'的Option 
$("#sel option[text='4']").remove();//刪除select中Text='4'的Option 
$("#sel").empty();//清空select中的option

二.獲取select選擇的Text和Value:

[JavaScript] 純文字檢視 複製程式碼
var checkText=$("#sel").find("option:selected").text();//獲取select選擇的Text 
var checkValue=$("#sel").val();//獲取select選擇的Value 
var checkIndex=$("#sel ").get(0).selectedIndex;//獲取select選擇的索引值 
var maxIndex=$("#sel option:last").attr("index");//獲取select最大的索引值

相關文章