首页 > 代码库 > 关于下拉框列表不可选择相同值的设置二：重置前一项相同选择

关于下拉框列表不可选择相同值的设置二：重置前一项相同选择

2024-09-14 09:33:52   215人阅读

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>测试-重置前一项相同选择</title>
    <style>
        .ipt {
            border: 1px solid #ddd;
            box-shadow: 0 0 3px rgba(0, 0, 0, 0.17) inset;
            transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
            border-radius: 0 !important;
            -moz-border-radius: 0 !important;
            -webkit-border-radius: 0 !important;
            height: 34px;
            padding: 0px 5px;
            line-height: 30px\9;
        }
    </style>
</head>
<body>
<div>
    description：如果前一个下拉框选择的值和当前值一样则前一个下拉框重置，
    以此类推。
</div>
<select class="ipt sortList">
    <option value="http://www.mamicode.com/0">请选择</option>
    <option value="http://www.mamicode.com/1">1</option>
    <option value="http://www.mamicode.com/2">2</option>
    <option value="http://www.mamicode.com/3">3</option>
    <option value="http://www.mamicode.com/4">4</option>
    <option value="http://www.mamicode.com/5">5</option>
</select>

<select class="ipt sortList">
    <option value="http://www.mamicode.com/0">请选择</option>
    <option value="http://www.mamicode.com/1">1</option>
    <option value="http://www.mamicode.com/2">2</option>
    <option value="http://www.mamicode.com/3">3</option>
    <option value="http://www.mamicode.com/4">4</option>
    <option value="http://www.mamicode.com/5">5</option>
</select>

<select class="ipt sortList">
    <option value="http://www.mamicode.com/0">请选择</option>
    <option value="http://www.mamicode.com/1">1</option>
    <option value="http://www.mamicode.com/2">2</option>
    <option value="http://www.mamicode.com/3">3</option>
    <option value="http://www.mamicode.com/4">4</option>
    <option value="http://www.mamicode.com/5">5</option>
</select>

<select class="ipt sortList">
    <option value="http://www.mamicode.com/0">请选择</option>
    <option value="http://www.mamicode.com/1">1</option>
    <option value="http://www.mamicode.com/2">2</option>
    <option value="http://www.mamicode.com/3">3</option>
    <option value="http://www.mamicode.com/4">4</option>
    <option value="http://www.mamicode.com/5">5</option>
</select>

<select class="ipt sortList">
    <option value="http://www.mamicode.com/0">请选择</option>
    <option value="http://www.mamicode.com/1">1</option>
    <option value="http://www.mamicode.com/2">2</option>
    <option value="http://www.mamicode.com/3">3</option>
    <option value="http://www.mamicode.com/4">4</option>
    <option value="http://www.mamicode.com/5">5</option>
</select>

<button onclick="endList()" class="ipt">确定输出最后的值</button>
<p></p>
<script src="http://cdn.bootcss.com/jquery/2.2.3/jquery.js"></script>
<script>
    var _this=‘‘;
    $(".sortList").on({
        click:function(){
            _this=$(this).find("option:selected").val();
            console.log("操作click时的值:"+_this);
        },
        change:function(){
            chageSort(this);
        }
    });

    function chageSort(thx){
        console.log(thx);
        var sortList=$(".sortList");
       /*注：index()用法: http://www.jb51.net/article/46769.htm*/
        var _index=$(thx).index()-1;
        console.log(‘当前元素下标：‘+_index);
        var _changeThis=$(thx).find("option:selected").val();
        console.log("change事件后当前值："+_changeThis);
       /* for(var i=0;i<sortList.length;i++){
            var isSelectedVal=sortList.eq(i).find("option:selected").val();
            console.log("选择列表的各项值:"+isSelectedVal);
        }*/
        for(var j=0;j<sortList.length;j++){
            var beforeVal=sortList.eq(j).find("option:selected").val();
            if(beforeVal==_changeThis && j!=_index){
                console.log(‘j:‘+j);
                /*注：法一：方法可行，但是不好*/
                /*sortList.eq(j).html(‘<option value="http://www.mamicode.com/0">请选择</option>‘+
                        ‘<option value="http://www.mamicode.com/1">1</option>‘+
                        ‘<option value="http://www.mamicode.com/2">2</option>‘+
                        ‘<option value="http://www.mamicode.com/3">3</option>‘+
                        ‘<option value="http://www.mamicode.com/4">4</option>‘+
                        ‘<option value="http://www.mamicode.com/5">5</option>‘);*/
                /*注：法二：attr存在不可多次触发的bug，换prop*/
                sortList.eq(j).find("option[value=http://www.mamicode.com/‘0‘]").prop("selected","selected");
            }
        }
    }

    function endList(){
        var arr=[];
        var list=$(".sortList");
        for(var i=0;i<list.length;i++){
            arr.push(list.eq(i).find("option:selected").val());
        }
        document.querySelectorAll("p")[0].innerHTML=arr;
    }
</script>
</body>
</html>

关于下拉框列表不可选择相同值的设置二：重置前一项相同选择


联系
我们