jquery操作select方法匯總
更新時間:2015年02月05日 11:30:22 作者:喵小夕
這篇文章主要介紹了jquery操作select方法,實例匯總了jQuery操作select的讀取、設(shè)置、添加及刪除等技巧,需要的朋友可以參考下
本文實例匯總了jquery操作select的方法。分享給大家供大家參考。具體如下:
jQuery獲取Select選擇的Text和Value:
語法解釋:
復制代碼 代碼如下:
$("#select_id").change(function(){//code...});//為Select添加事件,當選擇其中一項時觸發(fā)
var checkText=$("#select_id").find("option:selected").text();//獲取Select選擇的Text
var checkValue=$("#select_id").val();//獲取Select選擇的Value
var checkIndex=$("#select_id ").get(0).selectedIndex;//獲取Select選擇的索引值
var maxIndex=$("#select_id option:last").attr("index");//獲取Select最大的索引值
var checkText=$("#select_id").find("option:selected").text();//獲取Select選擇的Text
var checkValue=$("#select_id").val();//獲取Select選擇的Value
var checkIndex=$("#select_id ").get(0).selectedIndex;//獲取Select選擇的索引值
var maxIndex=$("#select_id option:last").attr("index");//獲取Select最大的索引值
jQuery設(shè)置Select選擇的Text和Value:
語法解釋:
復制代碼 代碼如下:
$("#select_id ").get(0).selectedIndex=1;//設(shè)置Select索引值為1的項選中
$("#select_id ").val(4);//設(shè)置Select的Value值為4的項選中
$("#select_id option[text='jQuery']").attr("selected", true);//設(shè)置Select的Text值為jQuery的項選中
$("#select_id ").val(4);//設(shè)置Select的Value值為4的項選中
$("#select_id option[text='jQuery']").attr("selected", true);//設(shè)置Select的Text值為jQuery的項選中
jQuery添加/刪除Select的Option項:
語法解釋:
復制代碼 代碼如下:
$("#select_id").append("<option value='Value'>Text</option>");//為Select追加一個Option(下拉項)
$("#select_id").prepend("<option value='0'>請選擇</option>");//為Select插入一個Option(第一個位置)
$("#select_id option:last").remove();//刪除Select中索引值最大Option(最后一個)
$("#select_id option[index='0']").remove();//刪除Select中索引值為0的Option(第一個)
$("#select_id option[value='3']").remove();//刪除Select中Value='3'的Option
$("#select_id option[text='4']").remove();//刪除Select中Text='4'的Option
$("#select_id").prepend("<option value='0'>請選擇</option>");//為Select插入一個Option(第一個位置)
$("#select_id option:last").remove();//刪除Select中索引值最大Option(最后一個)
$("#select_id option[index='0']").remove();//刪除Select中索引值為0的Option(第一個)
$("#select_id option[value='3']").remove();//刪除Select中Value='3'的Option
$("#select_id option[text='4']").remove();//刪除Select中Text='4'的Option
希望本文所述對大家的jQuery程序設(shè)計有所幫助。
您可能感興趣的文章:
- jQuery結(jié)合CSS制作漂亮的select下拉菜單
- 基于jquery實現(xiàn)select選擇框內(nèi)容左右移動添加刪除代碼分享
- jQuery實現(xiàn)的仿select功能代碼
- jquery使用ul模擬select實現(xiàn)表單美化的方法
- jquery實現(xiàn)select下拉框美化特效代碼分享
- jquery實現(xiàn)動態(tài)操作select選中
- Jquery對select的增、刪、改、查操作
- jQuery制作簡潔的多級聯(lián)動Select下拉框
- jquery 實現(xiàn)兩Select 標簽項互調(diào)示例代碼
- jQuery實現(xiàn)非常實用漂亮的select下拉菜單選擇效果
相關(guān)文章
jquery.multiselect多選下拉框?qū)崿F(xiàn)代碼
這篇文章主要為大家詳細介紹了jquery.multiselect 多選下拉框?qū)崿F(xiàn)代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-11-11jquery實現(xiàn)隱藏在左側(cè)的彈性彈出菜單效果
這篇文章主要介紹了jquery實現(xiàn)隱藏在左側(cè)的彈性彈出菜單效果,涉及jQuery動態(tài)操作頁面元素的顯示及隱藏技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09