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

最新推荐文章于 2021-12-30 15:47:53 发布

weixin_30528371

最新推荐文章于 2021-12-30 15:47:53 发布

阅读量168

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/aaron-pan/p/6700522.html

版权

<!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="0">请选择</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>
</select>

<select class="ipt sortList">
    <option value="0">请选择</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>
</select>

<select class="ipt sortList">
    <option value="0">请选择</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>
</select>

<select class="ipt sortList">
    <option value="0">请选择</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>
</select>

<select class="ipt sortList">
    <option value="0">请选择</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>
</select>

<button οnclick="endList()" class="ipt">确定输出最后的值</button>
<p></p>
<script src="//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="0">请选择</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>');*/
                /*注：法二：attr存在不可多次触发的bug，换prop*/
                sortList.eq(j).find("option[value='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>

转载于:https://www.cnblogs.com/aaron-pan/p/6700522.html

weixin_30528371

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于下拉框列表不可选择相同值的设置二：重置前一项相同选择

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>测试-重置前一项相同选择</title> <style> .ipt { border: 1px solid #ddd; ...
复制链接

扫一扫