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

    <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("_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='"+isSelectedVal+"']").attr("disabled",true);
    }
    }
    console.log("isSelectedVal:"+isSelectedVal);
    }
    for(var k=0;k<sortList.length;k++){
    sortList.eq(k).find("option[value='"+_this+"']").removeAttr("disabled");
    }
    }
    </script>
    </body>
    </html>

    作者:PC.aaron

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

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

    前端美食汇

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

  • 相关阅读:
    requests实现接口自动化(三)
    api 25 PopupWindow会占据整个屏幕
    INSTALL_FAILED_USER_RESTRICTED
    事件分发_水平滑动和垂直冲突解决
    MPAndroidChart market右边显示不全问题
    SimpleDateFormat 取当前周的周一和周日的日期,当前月第一个和最后一天的日期
    Callable,Runnable比较及用法
    Android系统启动流程
    debug-stripped.ap_' specified for property 'resourceFile' does not exist
    Theme.AppCompat.Light的解决方法
  • 原文地址:https://www.cnblogs.com/aaron-pan/p/6700500.html
Copyright © 2011-2022 走看看