jQuery设置select选中项代码实例

快乐打工仔 分类:实例代码

分享一段代码实例,它实现了设置select下拉菜单选中项等功能。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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()一章节。

jQuery设置select选中项代码实例,这样的场景在实际项目中还是用的比较多的,关于jQuery设置select选中项代码实例就介绍到这了。

jQuery设置select选中项代码实例属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容