多个select下拉框，选中当前某一项，其他下拉框去掉选中的值

Posted 2020-09-07 尐样贼拽

前两天在项目开发的时候有个需求是要求多个下拉框，选中某一项后其他下拉框移除该项，虽然写的有点绕，如果那个小伙伴有更好的例子，可以贡献下。先贴几张图看下效果

这是全部下拉框展开的效果图，具体描述看图吧，下面就开始贴代码

html部分

<div class="video_in">
        <p>
            下拉一
            <select name="B1other1_1" id=\'B1other1_1\' class="select">
                <option value=\'0\'>请选择</option>
                <option value=\'1\'>选择1</option>
                <option value=\'2\' selected>选择2</option>
                <option value=\'3\'>选择3</option>
                <option value=\'4\'>选择4</option>
            </select>
        </p>
        <p>
            下拉二
            <select name="B1other2_1" id=\'B1other2_1\' class="select">
                <option value=\'0\'>请选择</option>
                <option value=\'1\'>选择1</option>
                <option value=\'2\'>选择2</option>
                <option value=\'3\' selected>选择3</option>
                <option value=\'4\'>选择4</option>
            </select>
        </p>
        <p>
            下拉三
            <select name="B1other3_1" id=\'B1other3_1\' class="select">
                <option value=\'0\'>请选择</option>
                <option value=\'1\'>选择1</option>
                <option value=\'2\'>选择2</option>
                <option value=\'3\'>选择3</option>
                <option value=\'4\' selected>选择4</option>
            </select>
        </p>
        <p>
            下拉五
            <select name="B1other4_1" id=\'B1other4_1\' class="select">
                <option value=\'0\'>请选择</option>
                <option value=\'1\'>选择1</option>
                <option value=\'2\'>选择2</option>
                <option value=\'3\'>选择3</option>
                <option value=\'4\'>选择4</option>
            </select>
        </p>
        <p>
            下拉六
            <select name="B1other5_1" id=\'B1other5_1\' class="select">
                <option value=\'0\'>请选择</option>
                <option value=\'1\'>选择1</option>
                <option value=\'2\'>选择2</option>
                <option value=\'3\'>选择3</option>
                <option value=\'4\'>选择4</option>
            </select>
        </p>
    </div>
    </div>

 

js部分（方法一）网上找的大部分都是这种写法

$(document).ready(function() {
        var oldvalue = "";      //上一次选中的值
        var currentvalue = "";  //当前选中的值

        $(\'.video_in select\').each(function() {
            // 默认选中的值
            if ($(this).find("option:selected")) {
                oldvalue = $(this).attr(\'old\');
                var id = $(this).attr(\'id\');
                currentvalue = $(this).find(\'option:checked\').val();
                $(this).attr(\'old\', currentvalue);
                // 如果this下的某一项被选中，则not这个select find option[value=当前选择的值]外面添加other标签
                // .not(\'option[value=0]\') 该项是select的第一项 默认value为0
                $(\'.video_in select\').not(\'#\' + id).find(\'option[value=\' + currentvalue + \']\').not(\'option[value=0]\').wrap(\'<other></other>\')
            }
        })
        $(\'.video_in select\').change(function(e) {
            oldvalue = $(this).attr(\'old\');
            currentvalue = $(this).find(\'option:checked\').val();
            var id = $(this).attr(\'id\');
            if (oldvalue != "0") {
                if(currentvalue==0){    //当前选择值等于0的一项 => 第一项（请选择）
                    if($(\'.video_in select\').find(\'option[value=0]\').parent().hasClass("select")){
                        $(\'.video_in select\').not(\'#\' + id).find(\'option[value=\' + oldvalue + \']\').unwrap();    //unwrap 移除other
                        $(this).attr(\'old\', currentvalue);   //更新oldvalue的值 已便下次使用
                        return false;
                    }
                }else{
                    $(\'.video_in select\').not(\'#\' + id).find(\'option[value=\' + oldvalue + \']\').unwrap();
                    $(\'.video_in select\').not(\'#\' + id).find(\'option[value=\' + currentvalue + \']\').wrap(\'<other></other>\');
                    $(this).attr(\'old\', currentvalue);  //更新oldvalue的值 已便下次使用
                    if( $(\'.video_in select\').find(\'option[value=0]\').parent().hasClass("select")){
                        return false;
                    }
                    $(\'.video_in select\').find(\'option[value=0]\').unwrap();

                }
            }else{
                $(\'.video_in select\').not(\'#\' + id).find(\'option[value=\' + currentvalue + \']\').wrap(\'<other></other>\');
                $(this).attr(\'old\', currentvalue);   //更新oldvalue的值 已便下次使用
                if( $(\'.video_in select\').find(\'option[value=0]\').parent().hasClass("select")){     //如果请选择  退出
                    return false;
                }
                $(\'.video_in select\').not(\'#\' + id).find(\'option[value=\' + oldvalue + \']\').unwrap()

            }
        });
    });

 js部分（方法二）经过自己简化的

$(function(){
     var oldVal="";
     $(\'.video_in select\').each(function() {
        if ($(this).find("option:selected")) {
            var _thisVal = $(this).find(\'option:selected\').val();
             oldVal=$(this).attr("old",_thisVal)
            $(\'.video_in select\').parent().siblings("p").find("option[value="+_thisVal+"]").not("option[value=0]").hide()
        }
    })

    $(".video_in select").change(function(){
        oldVal=$(this).attr("old");
        var _thisVal=$(this).find(\'option:selected\').val();
        var id=$(this).attr("id");
        $(this).parent().siblings("p").find("option[value="+_thisVal+"]").not("option[value=0]").hide();
        $(this).parent().siblings("p").find("option[value="+oldVal+"]").show();
        $(this).find("option[value="+oldVal+"]").show();
        $(this).attr("old",_thisVal)
    })
})

 

css自己调整就好了