select下拉框,選中當前某一項,其他下拉框去掉選中的值

select下拉框,選中當前某一項,其他下拉框去掉選中的值
效果圖:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
    </script>

</head>
<body>
<div class="video_in">
    <p>
        下拉一
        <select name="B1other1_1" id='B1other1_1' class="select">
            <option value='0'selected></option>
            <option value='1'>選擇1</option>
            <option value='2'>選擇2</option>
            <option value='3'>選擇3</option>
            <option value='4'>選擇4</option>
            <option value='5'>選擇5</option>
            <option value='6'>選擇6</option>
            <option value='7'>選擇7</option>
            <option value='8'>選擇8</option>
        </select>
    </p>
    <p>
        下拉二
        <select name="B1other2_1" id='B1other2_1' class="select">
            <option value='0'selected></option>
            <option value='1'>選擇1</option>
            <option value='2'>選擇2</option>
            <option value='3'>選擇3</option>
            <option value='4'>選擇4</option>
            <option value='5'>選擇5</option>
            <option value='6'>選擇6</option>
            <option value='7'>選擇7</option>
            <option value='8'>選擇8</option>
        </select>
    </p>
    <p>
        下拉三
        <select name="B1other3_1" id='B1other3_1' class="select">
            <option value='0'selected></option>
            <option value='1'>選擇1</option>
            <option value='2'>選擇2</option>
            <option value='3'>選擇3</option>
            <option value='4'>選擇4</option>
            <option value='5'>選擇5</option>
            <option value='6'>選擇6</option>
            <option value='7'>選擇7</option>
            <option value='8'>選擇8</option>
        </select>
    </p>
    <p>
        下拉五
        <select name="B1other4_1" id='B1other4_1' class="select">
            <option value='0'selected></option>
            <option value='1'>選擇1</option>
            <option value='2'>選擇2</option>
            <option value='3'>選擇3</option>
            <option value='4'>選擇4</option>
            <option value='5'>選擇5</option>
            <option value='6'>選擇6</option>
            <option value='7'>選擇7</option>
            <option value='8'>選擇8</option>
        </select>
    </p>
    <p>
        下拉六
        <select name="B1other5_1" id='B1other5_1' class="select">
            <option value='0'selected></option>
            <option value='1'>選擇1</option>
            <option value='2'>選擇2</option>
            <option value='3'>選擇3</option>
            <option value='4'>選擇4</option>
            <option value='5'>選擇5</option>
            <option value='6'>選擇6</option>
            <option value='7'>選擇7</option>
            <option value='8'>選擇8</option>
        </select>
    </p>
    <p>
        下拉七
        <select name="B1other5_1" id='B1other6_1' class="select">
            <option value='0'selected></option>
            <option value='1'>選擇1</option>
            <option value='2'>選擇2</option>
            <option value='3'>選擇3</option>
            <option value='4'>選擇4</option>
            <option value='5'>選擇5</option>
            <option value='6'>選擇6</option>
            <option value='7'>選擇7</option>
            <option value='8'>選擇8</option>
        </select>
    </p>
</div>
</div>

<script>
    $(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)
        })
    })
</script>
</body>
</html>

另一種方法:

$(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()

            }
        });
    });

轉自:https://blog.csdn.net/mingqingyuefeng/article/details/78614882

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章