jQuery設定select選中項程式碼例項

螞蟻小編發表於2017-04-14
jQuery

分享一段程式碼例項，它實現了設定select下拉選單選中項等功能。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
select {
  width: 100px;
  height: 30px;
  line-height: 30px;
  border: #ccc 1px solid;
  border-radius: 3px;
}
input[type="button"] {
  width: 100px;
  height: 30px;
  line-height: 30px;
  background: #333;
  color: #fff;
  border: none;
  border-radius: 3px;
}
input.xuanz {
  background: #09F;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(document).ready(function () {
  var ablumlistnumeber = $("#caidan option").length;
  $("#btn1").addClass("xuanz");
  for (var index = 0; index < ablumlistnumeber; index++) {
    $("#btn" + (index + 1)).click(function () {
      var val= $(this).val();
      $(this).siblings().removeClass("xuanz");
      $(this).addClass("xuanz");
      $("#caidan").children("option").each(function () {
        if ($(this).text() == val) {
          $(this).siblings().removeAttr("selected");
          $(this).attr("selected", true);
        }
      })
    })
  }
  $("#caidan").change(function () {
    var xh = $(this).children("option:selected").index();
    $("#btn" + (xh + 1)).siblings().removeClass("xuanz");
    $("#btn" + (xh + 1)).addClass("xuanz");
  })
})
</script>
</head>
<body>
<label for="caidan"></label>
<select name="caidan" id="caidan">
  <option>div教程</option>
  <option>css教程</option>
  <option>jquery教程</option>
  <option>js教程</option>
  <option>json教程</option>
  <option>ajax教程</option>
</select>
<input type="button" id="btn1" value="div教程" />
<input type="button" id="btn2" value="css教程" />
<input type="button" id="btn3" value="jquery教程" />
<input type="button" id="btn4" value="js教程" />
<input type="button" id="btn5" value="json教程" />
<input type="button" id="btn6" value="ajax教程" />
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.$(document).ready(function () {})，當文件結構完全載入完畢再去執行函式中的程式碼。

（2）.var ablumlistnumeber = $("#caidan option").length，獲取option項的數目。

（3）.$("#btn1").addClass("xuanz")，為第一個按鈕新增xuanz樣式類，也就是將按鈕背景顏色設定為藍色。

（4）.for (var index = 0; index < ablumlistnumeber; index++) {}，通過for迴圈為按鈕註冊click事件處理函式。

（5）.$("#btn" + (index + 1)).click(function () {})，註冊click事件處理函式。

（6）.var val = $(this).val()，獲取當前按鈕的value屬性值。

（7）.$(this).siblings().removeClass("xuanz")，刪除兄弟元素的xuanz樣式類。

（8）.$(this).addClass("xuanz")，為當前按鈕新增xuanz樣式類。

（9）.$("#caidan").children("option").each(function () {}）,遍歷select下拉選單的每一個option項。

（10）.if ($(this).text() == val) {

  $(this).siblings().removeAttr("selected");

  $(this).attr("selected", true);

}如果option項的文字內容等於當前點選按鈕的value值，那麼就刪除兄弟option玄素的selected屬性。

最後將此option項設定為選中狀態。

（11）.$("#caidan").change(function () {

  var xh = $(this).children("option:selected").index();

  $("#btn" + (xh + 1)).siblings().removeClass("xuanz");

  $("#btn" + (xh + 1)).addClass("xuanz");

})為select下拉選單註冊change事件處理函式。

首先獲取當前選中option項的索引值。

然後將對應索引的按鈕的兄弟元素刪除xuanz樣式類

最後給對應索引的按鈕新增xuanz樣式類。

二.相關閱讀:

（1）.addClass()可以參閱jQuery addClass()一章節。

（2）.val()可以參閱jQuery val()一章節。

（3）.siblings()可以參閱jQuery siblings()一章節。

（4）.removeClass()可以參閱jQuery removeClass()一章節。

（5）.children()可以參閱jQuery children()一章節。

（6）.each()可以參閱jQuery each()一章節。

（7）.removeAttr()可以參閱jQuery removeAttr()一章節。

（8）.attr()可以參閱jQuery attr()一章節。

（9）.index()可以參閱jQuery index()一章節。

相關文章