多个select下拉框,当选中当前的一项时,其他下拉选都不能选择同样的选项(下拉选的值不能相同)

发现了两个解决方法,一个是自己写的比较鸡肋

//选中的选项不能够重复(重复的选项隐藏)
    $(document).ready(function(){
        $('#selectOption select').change(function(){
            var oldValue=$(this).attr('old');
            var currentValue=$(this).val();
            if(oldValue){
                $('select option[value='+oldValue+']').show();
            }
            $('select option[value='+currentValue+']').hide();
      			
            $('#option1').show()
            $('#option2').show()
            $('#option3').show()
            $(this).attr('old',currentValue);
        });
    });

当时遇到了一个问题,有一个选项不需要隐藏,如果像我这么做就多了一点不必要的步骤,后来通过面向百度编程发现了更好的解决方法,记录一下

JQ代码

        if(spec=="spec1"){
            $("#spec2 option").show();
            var values = $("#spec1").val();
            $("#spec2 option[value="+values+"]").hide();
        }
        if(spec=="spec2"){
            $("#spec1 option").show();
            var values = $("#spec2").val();
            $("#spec1 option[value="+values+"]").hide();
        }

HTML代码

<select name="spec1" id="spec1" onchange="specSelect(this,'spec1')">
    <option value="0" >==选择规格1==</option>
    <option value="1">去</option>
    <option value="2">来</option>
    <option value="3">走</option>
</select>
       			
<select name="spec2" id="spec2" onchange="specSelect(this,'spec1')">
    <option value="0" >==选择规格2==</option>
    <option value="1">去</option>
    <option value="2">来</option>
    <option value="3">走</option>
</select>
	

总结还是别的大佬写的比较好,学习一下