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选中项代码实例属于前端实例代码，有关更多实例代码大家可以查看。