jquery操作select詳解

來源:互聯網
上載者:User

jquery操作select詳解

 本篇文章主要是對jquery操作select(取值,設定選中)進行了介紹,需要的朋友可以過來參考下,希望對大家有所協助

每一次操作select的時候,總是要出來翻一下資料,不如自己總結一下,以後就翻這裡了。

 

比如<select class="selector"></select>

 

1、設定value為pxx的項選中

 

 $(".selector").val("pxx");

 

2、設定text為pxx的項選中

 

$(".selector").find("option[text='pxx']").attr("selected",true);

 

這裡有一個中括弧的用法,中括弧裡的等號的前面是屬性名稱,不用加引號。很多時候,中括弧的運用可以使得邏輯變得很簡單。

 

3、擷取當前選中項的value

 

$(".selector").val();

 

4、擷取當前選中項的text

 

$(".selector").find("option:selected").text();

 

這裡用到了冒號,掌握它的用法並舉一反三也會讓代碼變得簡潔。

 

很多時候用到select的級聯,即第二個select的值隨著第一個select選中的值變化。這在jquery中是非常簡單的。

 

如:

 

 代碼如下:

$(".selector1").change(function(){

 

 // 先清空第二個

 

  $(".selector2").empty();

 

 // 實際的應用中,這裡的option一般都是用迴圈產生多個了

 

  var option = $("<option>").val(1).text("pxx");

 

  $(".selector2").append(option);

 

});

 

 

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.