javascript - 关于选择主下拉框后~后面的下拉框跟着同步一起变化的问题~~
本文介绍了javascript - 关于选择主下拉框后~后面的下拉框跟着同步一起变化的问题~~的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
关于选择主下拉框后~后面的下拉框跟着同步一起变化的问题~~
代码很简单~4个下拉框~想要实现的效果就是~主下拉框选择了"赵子龙"，后面3个下拉框当前选项也同步成赵子龙。
自己简单了实现了下~不过有bug求大 神 指 点~万分感谢~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<div>
<select name="select1" id="select1">
<option value="刘玄德">刘玄德</option>
<option value="关云长">关云长</option>
<option value="张翼德">张翼德</option>
<option value="赵子龙">赵子龙</option>
<option value="魏文长">魏文长</option>
</select>
<select name="select2" id="select2">
<option value="刘玄德">刘玄德</option>
<option value="关云长">关云长</option>
<option value="张翼德">张翼德</option>
<option value="赵子龙">赵子龙</option>
<option value="魏文长">魏文长</option>
</select>
<select name="select3" id="select3">
<option value="刘玄德">刘玄德</option>
<option value="关云长">关云长</option>
<option value="张翼德">张翼德</option>
<option value="赵子龙">赵子龙</option>
<option value="魏文长">魏文长</option>
</select>
<select name="select4" id="select4">
<option value="刘玄德">刘玄德</option>
<option value="关云长">关云长</option>
<option value="张翼德">张翼德</option>
<option value="赵子龙">赵子龙</option>
<option value="魏文长">魏文长</option>
</select>
</div>
<script>
$("#select1").change(function() {
var $val = $(this).val(); //获取整体选择的值。
$(this).siblings().find("option:selected").text($val).val($val);//把整体值赋给后面的当前选择项
//这样写有bug~~
})
</script>
</body></html>
解决方案
$(function(){
$("#select1").change(function() {
var _this = $(this);
var i = this.selectedIndex;
_this.siblings('select').each(function(x,item){
item.selectedIndex = i;
});
})
});这篇关于javascript - 关于选择主下拉框后~后面的下拉框跟着同步一起变化的问题~~的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
