zoukankan html css js c++ java

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

<!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: 30px9;
        }
    </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 onclick="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>

作者：PC.aaron

出处：http://www.cnblogs.com/aaron-pan/

GitHub：https://github.com/PCAaron/PCAaron.github.io，欢迎star，获取最新内容

前端美食汇

本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

查看全文

相关阅读:
从零开始学android开发-通过WebService获取今日天气情况
 android常见错误-E/AndroidRuntime(13678): java.lang.NoClassDefFoundError:
java 使用相对路径读取文件
 冒泡排序
 快速排序
 为什么使用抽象类？有什么好处？
为什么用抽象类，接口
 String.valueOf()
Python 资源
 文本相似度-BM25算法

原文地址：https://www.cnblogs.com/aaron-pan/p/6700522.html