淺析Jquery操作select
話不多說(shuō),請(qǐng)看代碼:
<select id="Select1"> <option value="one">一</option> <option value="two">二</option> <option value="thr">三</option> <option value="tho">四</option> </select>
注釋:
(1)給下拉框賦值:$("#Select1").val(“二”);這時(shí)已經(jīng)選中了 value是two的選項(xiàng) ,通過(guò)$("#Select1")[0].selectedIndex或者$("#Select1").get(0).selectedIndex可以得到此時(shí)的索引是1,下拉框的索引是從0開始的
(2)通過(guò)設(shè)置屬性$("#Select1 option[value='two']").attr('selected',true);也可以設(shè)置選中 其實(shí)就是相當(dāng)于賦值
(3)得到選中值對(duì)應(yīng)的text:
1、通過(guò)值得到:$("#Select1 option[value='" + 值 + "']").text()或者$("#Select1").find("option[value='" + 值 + "']").text()
2、通過(guò)選中狀態(tài)得到:$("#Select1").find("option:selected").text()
(4)下拉框的級(jí)聯(liá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); });
(5)通過(guò)option中text的值 來(lái)選中相應(yīng)的option的值
var count = $("#Select1 option").length; for (var i = 0; i < count; i++) { if ($("#Select1").get(0).options[i].text == $(this).val()) { $("#Select1").get(0).options[i].selected = true; break; } }
Ps:jquer中去掉前后空格的方法:$.trim(值);
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,同時(shí)也希望多多支持腳本之家!
- jQuery實(shí)現(xiàn)金額錄入框
- jQuery 獲取select選中值及清除選中狀態(tài)
- jQuery內(nèi)存泄露解決辦法
- jQuery中animate的幾種用法與注意事項(xiàng)
- jQuery中值得注意的trigger方法淺析
- jQuery實(shí)現(xiàn)字符串全部替換的方法
- 簡(jiǎn)單實(shí)現(xiàn)jquery焦點(diǎn)圖
- 基于jquery實(shí)現(xiàn)的鼠標(biāo)懸停提示案例
- jquery滾動(dòng)條插件(可以自定義)
- jquery實(shí)現(xiàn)簡(jiǎn)單的瀑布流布局
- 基于jQuery實(shí)現(xiàn)的查看全文功能【實(shí)用】
- jQuery學(xué)習(xí)筆記之入門
相關(guān)文章
jquery中g(shù)et和post的簡(jiǎn)單實(shí)例
本篇文章主要是對(duì)jquery中g(shù)et和post的簡(jiǎn)單實(shí)例進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-02-02jquery實(shí)現(xiàn)員工信息添加與刪除功能
這篇文章主要為大家詳細(xì)介紹了利用jquery制作簡(jiǎn)易的員工信息添加與刪除,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09jQuery 入門級(jí)學(xué)習(xí)筆記及源碼
本周公司技術(shù)講座輪到我了,準(zhǔn)備說(shuō)說(shuō)現(xiàn)在流行的jQuery,下面是概要提綱,關(guān)鍵是看custom.js,已上傳源碼,程序中“//##”是分段用的,大家可以根據(jù)每一段取消注釋,然后找到相應(yīng)的id或class名查看效果。2010-01-01jQuery添加/改變/移除CSS類及判斷是否已經(jīng)存在CSS
正如標(biāo)題所言會(huì)用到removeClass移除CSS類、addClass添加CSS類、toggleClass添加或者移除CSS類,hasClass判斷是否已經(jīng)存在CSS2014-08-08jQuery實(shí)現(xiàn)下拉菜單滑動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)下拉菜單滑動(dòng)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08