這篇文章運(yùn)用簡(jiǎn)單易懂的例子給大家介紹select在jquery中的應(yīng)用,代碼非常詳細(xì),感興趣的小伙伴們可以參考借鑒,希望對(duì)大家能有所幫助。
創(chuàng)新互聯(lián)致力于網(wǎng)站制作、網(wǎng)站設(shè)計(jì),成都網(wǎng)站設(shè)計(jì),集團(tuán)網(wǎng)站建設(shè)等服務(wù)標(biāo)準(zhǔn)化,推過(guò)標(biāo)準(zhǔn)化降低中小企業(yè)的建站的成本,并持續(xù)提升建站的定制化服務(wù)水平進(jìn)行質(zhì)量交付,讓企業(yè)網(wǎng)站從市場(chǎng)競(jìng)爭(zhēng)中脫穎而出。 選擇創(chuàng)新互聯(lián),就選擇了安全、穩(wěn)定、美觀的網(wǎng)站建設(shè)服務(wù)!select(),這個(gè)函數(shù)用于確定一個(gè)或多個(gè)套接口的狀態(tài),對(duì)每一個(gè)套接口,調(diào)用者可查詢它的可讀性、可寫(xiě)性及錯(cuò)誤狀態(tài)信息,用fd_set結(jié)構(gòu)來(lái)表示一組等待檢查的套接口,在調(diào)用返回時(shí),這個(gè)結(jié)構(gòu)存有滿足一定條件的套接口組的子集,并且select()返回滿足條件的套接口的數(shù)目。
觸發(fā)每一個(gè)匹配元素的select事件
這個(gè)函數(shù)會(huì)調(diào)用執(zhí)行綁定到select事件的所有函數(shù),包括瀏覽器的默認(rèn)行為。可以通過(guò)在某個(gè)綁定的函數(shù)中返回false來(lái)防止觸發(fā)瀏覽器的默認(rèn)行為。
一、基礎(chǔ)取值問(wèn)題
例如<select class="selector"></select>
1、設(shè)置value為pxx的項(xiàng)選中
$(".selector").val("pxx");
2、設(shè)置text為pxx的項(xiàng)選中
$(".selector").find("option:contains('pxx')").attr("selected",true);
注意:之前$(".selector").find("option[text='pxx']").attr("selected",true);
這種寫(xiě)法是錯(cuò)誤的,目前個(gè)人證實(shí)input支持這種獲取屬性值的寫(xiě)法:"input[text='pxx']
",select中需要"option:contains('pxx')
"這樣獲取。
這里有一個(gè)中括號(hào)的用法,中括號(hào)里的等號(hào)的前面是屬性名稱,不用加引號(hào)。很多時(shí)候,中括號(hào)的運(yùn)用可以使得邏輯變得很簡(jiǎn)單。
3、獲取當(dāng)前選中項(xiàng)的value
$(".selector").val();
4、獲取當(dāng)前選中項(xiàng)的text
$(".selector").find("option:selected").text();
這里用到了冒號(hào),掌握它的用法并舉一反三也會(huì)讓代碼變得簡(jiǎn)潔。
二、很多時(shí)候用到select的級(jí)聯(lián),即第二個(gè)select的值隨著第一個(gè)select選中的值變化。這在jquery中是非常簡(jiǎn)單的。
如:
$(".selector1").change(function(){ // 先清空第二個(gè) $(".selector2").empty(); // 實(shí)際的應(yīng)用中,這里的option一般都是用循環(huán)生成多個(gè)了 var option = $("<option>").val(1).text("pxx"); $(".selector2").append(option); });
三、jQuery獲取Select選擇的Text和Value:
語(yǔ)法解釋:
$("#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:
語(yǔ)法解釋:
$("#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)選中
五、jQuery添加/刪除Select的Option項(xiàng):
語(yǔ)法解釋:
$("#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è)位置) $("#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
六、jquery radio取值,checkbox取值,select取值,radio選中,checkbox選中,select選中,及其相關(guān)
1 獲取一組radio被選中項(xiàng)的值
var item = $('input[name=items][checked]').val();
2 獲取select被選中項(xiàng)的文本
var item = $("select[name=items] option[selected]").text();
3 select下拉框的第二個(gè)元素為當(dāng)前選中值
$('#select_id')[0].selectedIndex = 1;
4 radio單選組的第二個(gè)元素為當(dāng)前選中值
$('input[name=items]').get(1).checked = true;
七、獲取值:
文本框,文本區(qū)域:$("#txt").attr("value");
多選框 checkbox:$("#checkbox_id").attr("value");
單選組radio: $("input[type=radio][checked]").val();
下拉框select:$('#sel').val();
八、控制表單元素:
文本框,文本區(qū)域:
$("#txt").attr("value",'');//清空內(nèi)容 $("#txt").attr("value",'11');//填充內(nèi)容
多選框checkbox:
$("#chk1").attr("checked",'');//不打勾 $("#chk2").attr("checked",true);//打勾 if($("#chk1").attr('checked')==undefined) //判斷是否已經(jīng)打勾
單選組 radio:
$("input[type=radio]").attr("checked",'2');//設(shè)置value=2的項(xiàng)目為當(dāng)前選中項(xiàng)
下拉框 select:
$("#sel").attr("value",'-sel3');//設(shè)置value=-sel3的項(xiàng)目為當(dāng)前選中項(xiàng) $("<option value='1'>1111</option><option value='2'>2222</option>").appendTo("#sel")//添加下拉框的option $("#sel").empty();//清空下拉框
九、判斷在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)于select在jquery中的應(yīng)用就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò),可以把它分享出去讓更多的人看到。
本文題目:select在jquery中的應(yīng)用-創(chuàng)新互聯(lián)
當(dāng)前路徑:http://bm7419.com/article48/dpdiep.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供用戶體驗(yàn)、營(yíng)銷型網(wǎng)站建設(shè)、網(wǎng)站導(dǎo)航、虛擬主機(jī)、網(wǎng)站內(nèi)鏈、ChatGPT
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容