关于选择主下拉框后~后面的下拉框跟着同步一起变化的问题~~
代码很简单~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>