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

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

2024-09-14 09:36:23   216人阅读

<!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：选择的时候，如果已经选择了1，则下一个下拉框就不能选择1的选项，以此类推。
</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>

<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("_beforeChangethis:"+_this);
        },
        change:function(){
            console.log("_changeThis:"+_this);
            chageSort()
        }
    })

    function chageSort(){
        var sortList=$(".sortList");
        for(var i=0;i<sortList.length;i++){
            var isSelectedVal=sortList.eq(i).find("option:selected").val();
            for(var j=0;j<sortList.length;j++){
                if(isSelectedVal!=0 && j!=i){
                    sortList.eq(j).find("option[value=http://www.mamicode.com/‘"+isSelectedVal+"‘]").attr("disabled",true);
                }
            }
            console.log("isSelectedVal:"+isSelectedVal);
        }
        for(var k=0;k<sortList.length;k++){
            sortList.eq(k).find("option[value=http://www.mamicode.com/‘"+_this+"‘]").removeAttr("disabled");
        }
    }
</script>
</body>
</html>

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


联系
我们