jQuery操作select下拉選單程式碼例項

admin發表於2017-04-15
jQuery

本章節分享一段程式碼例項，它演示瞭如何使用jQuery操作select下拉選單。

比較全面，比如後去下來選單的文字內容，value屬性值，刪除或者新增option項等。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
*{
  margin: 0;
  padding: 0;
}
.select_box {
  position: relative;
}
.select {
  width: 200px;
  height: 40px;
  font-size: 18px;
}
</style>
 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function() {
  $('.select').on('change', function() { //選擇選項時觸發
    console.log($(this).val()); //獲取選中值得val
  });
  $('.btn1').on('click', function() {
    alert($('.select').val()) //獲取選中值得val
  })
  $('.btn2').on('click', function() {
    alert($('.select option:selected').text()) //獲取選中值得text
  })
  $('.btn3').on('click', function() {
    alert($('.select option:selected').index()) //獲取Select選中項的索引值
  })
  $('.btn4').on('click', function() {
    //刪除option
    //$('.select option:last').remove();//刪除最後一項
    $('.select option[value="3"]').remove(); //刪除值為3的
  })
  var n = 6;
  $('.btn5').on('click', function() {
    //新增option
    n++;
    var o_option = $('<option>').appendTo($('.select'));
    o_option.attr({
      'value': n
    })
    o_option.html('螞蟻部落' + n);
 
  })
  $('.btn6').on('click', function() {
    $('.select option').eq(3).attr({
       'selected': 'true'
    }) //獲取Select預設選中某一項
  })
})
</script>
</head>
<body>
  <div class="select_box">
    <select name="" class="select">
      <option value="1">螞蟻部落一</option>
      <option value="2">螞蟻部落二</option>
      <option value="3">螞蟻部落三</option>
      <option value="4">螞蟻部落四</option>
      <option value="5">螞蟻部落五</option>
      <option value="6">softwhy.com</option>
    </select>
  </div>
  <button class="btn1">獲取value</button>
  <button class="btn2">獲取選中的內容</button>
  <button class="btn3">獲取Select選中項的索引值</button>
  <button class="btn4">刪除Select中value值為3的Option</button>
  <button class="btn5">新增option</button>
  <button class="btn6">讓第四項預設選中</button>
</body>
</html>

相關文章