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

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

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

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自己调整就好了