关于选择主下拉框后~后面的下拉框跟着同步一起变化的问题~~

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

图片描述

图片描述

阅读 4.1k
2 个回答
$(function(){
   $("#select1").change(function() {
     var _this = $(this);
     var i = this.selectedIndex;
     _this.siblings('select').each(function(x,item){
       item.selectedIndex = i;
     });
   })
});
 $("#select1").change(function() {
    var $val = $(this).val(); //获取当前选择的值。
    $(this).siblings().val($val);//把值赋给后面的select
})
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题