jquery操作select常見(jiàn)方法大全【7種情況】
本文實(shí)例講述了jquery操作select常見(jiàn)方法。分享給大家供大家參考,具體如下:
在前段HTML頁(yè)面設(shè)計(jì)中select 下拉框,或者 在 multiple="multiple" 時(shí),表現(xiàn)為列表。經(jīng)常會(huì)在頁(yè)面上對(duì)其進(jìn)行操作,這些操作不外乎:
1. 得到選中的 select 的 option 的值或者text.
2. 刪除選中的 select 的 option.
3. 向select中增加新的option.
4. 得到select option 長(zhǎng)度,也就是個(gè)數(shù)size
5. 清空select.
6. 兩個(gè)select 框之間互相添加刪除,從左邊到右邊,從右邊到左邊的操作,通常是多選情況。
7. 判斷在 select 框中是否存在某一個(gè)值的選項(xiàng)
對(duì)第一種情況,用如下方法:
$("#select_id").change(function(){//code...}); //為Select添加事件,當(dāng)選擇其中一項(xiàng)時(shí)觸發(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最大的索引值 jQuery設(shè)置Select選擇的Text和Value:
$("#select_id ").get(0).selectedIndex=1; //設(shè)置Select索引值為1的項(xiàng)選中 $("#select_id ").val(4); //設(shè)置Select的Value值為4的項(xiàng)選中 $("#select_id option[text='jQuery']").attr("selected", true); //設(shè)置Select的Text值為jQuery的項(xiàng)選中
對(duì)第二種情況,刪除的處理:
$("#select_id option:last").remove(); //刪除Select中索引值最大Option(最后一個(gè)) $("#select_id option[index='0']").remove(); //刪除Select中索引值為0的Option(第一個(gè)) $("#select_id option[value='3']").remove(); //刪除Select中Value='3'的Option $("#select_id option[text='4']").remove(); //刪除Select中Text='4'的Option
如果要?jiǎng)h除選中的option ,則需要先得到 選中option 的序號(hào). var checkIndex=$("#select_id ").get(0).selectedIndex;
然后再調(diào)用上面的方法刪除.
對(duì)第三種情況,增加option 的處理:
$("#select_id").append("<option value='Value'>Text</option>"); //為Select追加一個(gè)Option(下拉項(xiàng)) $("#select_id").prepend("<option value='0'>請(qǐng)選擇</option>"); //為Select插入一個(gè)Option(第一個(gè)位置)
對(duì)第四種情況,得到select 的長(zhǎng)度
var totalcount=$("#single_user_choice").get(0).options.length;
第五種情況,清空select
$("#single_user_choice").get(0).options.length=0;
第六種情況。兩個(gè)select 框之間互相添加刪除,從左邊到右邊,從右邊到左邊的操作,通常是多選情況,也就是設(shè)置了 multiple="multiple" 。
var $options = $('#select1 option:selected');//獲取當(dāng)前選中的項(xiàng) var $remove = $options.remove();//刪除下拉列表中選中的項(xiàng) $remove.appendTo('#select2');//追加給對(duì)方
第七種情況,判斷在select 是否存在某個(gè)value 的 option
function is_Exists(selectid,value){ var theid='#'+selectid; var count=$(theid).get(0).options.length; var isExist = false; for(var i=0;i<count;i++){ if ($(theid).get(0).options[i].value == value){ isExist=true; break; } } return isExist; }
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery常見(jiàn)事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- jquery操作select詳解(取值,設(shè)置選中)
- jquery實(shí)現(xiàn)動(dòng)態(tài)操作select選中
- jQuery操作select下拉框的text值和value值的方法
- jquery操作select option 的代碼小結(jié)
- 利用jquery操作select下拉列表框的代碼
- jQuery操作Select的Option上下移動(dòng)及移除添加等等
- jQuery操作Select選擇的Text和Value(獲取/設(shè)置/添加/刪除)
- jquery操作select大全
- jQuery操作select的實(shí)例代碼
- jquery操作select元素和option的實(shí)例代碼
- jquery下拉select控件操作方法分享(jquery操作select)
相關(guān)文章
jQuery 源碼分析筆記(3) Deferred機(jī)制
從1.5版本開(kāi)始,jQuery加入了Deferred功能,讓事件處理隊(duì)列更加的完善。并用這個(gè)機(jī)制重寫(xiě)了Ajax模塊。雖然還沒(méi)輪到Ajax,但是接下來(lái)的事件處理函數(shù)中牽扯到了這個(gè)機(jī)制,所以提前看這段代碼。2011-06-06jQuery實(shí)現(xiàn)點(diǎn)擊標(biāo)題輸入詳細(xì)信息
點(diǎn)擊標(biāo)題,輸入詳細(xì)信息,點(diǎn)擊確定按鈕,完成,把不必要的選項(xiàng)隱藏,當(dāng)用戶真正有需要的時(shí)候,在顯示出來(lái)2013-04-04jquery 輸入框查找關(guān)鍵字并提亮顏色的實(shí)例代碼
下面小編就為大家分享一篇jquery 輸入框查找關(guān)鍵字并提亮顏色的實(shí)例代碼,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01基于jquery的simpleValidate簡(jiǎn)易驗(yàn)證插件
簡(jiǎn)易驗(yàn)證插件simpleValidate使用心得,基于JQuery,修改小BUG后能兼容各瀏覽器,附自用版本供下載2014-01-01jQuery利用DOM遍歷實(shí)現(xiàn)商城結(jié)算系統(tǒng)實(shí)戰(zhàn)
這篇文章主要介紹了jQuery利用DOM遍歷實(shí)現(xiàn)商城結(jié)算系統(tǒng)實(shí)戰(zhàn),文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹,具一定的參考價(jià)值,感興趣的小伙伴可以參考一下2022-06-06JQuery模板插件 jquery.tmpl 動(dòng)態(tài)ajax擴(kuò)展
在上一篇JQuery模板插件-jquery.tmpl中介紹了這款插件。有時(shí)我們需要去動(dòng)態(tài)的ajax去加載模板,或者數(shù)據(jù),根據(jù)url參數(shù)或者其他信息加載不同的模板,數(shù)據(jù)2011-11-11jQuery EasyUI API 中文文檔 - Tabs標(biāo)簽頁(yè)/選項(xiàng)卡
jQuery EasyUI API 中文文檔 - 標(biāo)簽頁(yè)/選項(xiàng)卡(Tabs),學(xué)習(xí)jQuery EasyUI的朋友可以參考下。2011-10-10jQuery hover 延時(shí)器實(shí)現(xiàn)代碼
在上一篇文章 《鼠標(biāo)事件延時(shí)切換插件》 中,我已經(jīng)寫(xiě)了幾個(gè)簡(jiǎn)單的延時(shí)器的例子,今天突然想到j(luò)Query的自定義動(dòng)畫(huà)的animate方法可以使用delay2011-03-03