<!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="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>

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

  1. @Html.DropDownListFor 下拉框绑定（选择默认值）

    首先先构建绑定下拉框的数据源 private void GetSalesList() { var userList = _rmaExpressAppService.GetUserList(); Tem ...

  2. 下拉框改变事件：获取下拉框中当前选择的文本 SelectionChanged事件

    /// <summary> /// 下拉框改变事件:获取下拉框中当前选择的文本 /// </summary> /// <param name="sender&q ...

  3. form表单传递下拉框的Value和Text值，不适用Jquery传递

    同时获取下拉框的Value和Text值的解决办法:添加一个<input type="text" >文本框,用户选中一项后就将该项的value值给他 然后接受页面获取该文 ...

  4. 点击select下拉框获取option的属性值

    select下拉框作为前端开发者应该是经常使用的,最近在项目中遇到这样的情况,点击下拉框选项,需要获取所点击的option的属性值,当时想很简单啊,给option加一个点击事件不就行了,然后就加了一下 ...

  5. JavaScript获取select下拉框中的第一个值

    JavaScript获取select下拉框中的第一个值 1.说明 获取select下拉框中的第一个值 2.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  6. jq select change下拉框选项变化判断选中值,添加（attr)或移除(removeAttr)一个或多个属性

    select change下拉框选项变化判断选中值,添加(attr)或移除(removeAttr)一个或多个属性 $("#IsRecommend").change(function ...

  7. 动态加载下拉框列表并添加onclick事件

    1.  js动态加载元素并设置属性 摘自(http://www.liangshunet.com/ca/201408/336848696.htm) <div id="parent&quo ...

  8. QTP测试.NET程序的时候，ComboBox下拉框控件选择后，运行时对象不可见解决方案

    解决方法: 录制时,选择下拉框数据的时候,不要鼠标单击选择,而是要用ENTER(回车键)来选择,才能完成选择,这样录制就OK了.

  9. select下拉框默认不能选择第一个选项的问题

    如题,现在有个js的功能:用户选择下拉框的同时,把选择的下拉框显示出来.同时选择的不能有重复的.刚开始 使用的是 select的onchange事件: $("#liveType") ...

随机推荐

  1. echarts动态添加数据（饼图为例）

    $.ajax({type : "POST",async : false,url : '${ctx}/basic/bsAllPictureGuarantee/pictJson',da ...

  2. 【2017-02-24】循环嵌套、跳转语句、异常语句、迭代穷举、while

    一.循环嵌套 1.格式 for() { for() { } } 2.执行顺序 先执行外边循环进到循环体发现里面的循环,开始执行里面的循环.等到里面的循环执行完毕,再执行外边的循环. 在外面循环第一次, ...

  3. 使用docker-compose 大杀器来部署服务 上

    使用docker-compose 大杀器来部署服务 上 我们都听过或者用过 docker,然而使用方式却是仅仅用手动的方式,这样去操作 docker 还是很原始. 好吧,可能在小白的眼中噼里啪啦的对着 ...

  4. React组件开发经典案例--todolist

    点开查看代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <me ...

  5. Servlet中编码在过滤器中的使用

    1.先配置web.xml ->配置过滤器 // filter-class 为写的过滤器类 实现 Filter 接口 <filter> <filter-name>Encod ...

  6. 超级素数幂 java

    链接:https://www.nowcoder.com/questionTerminal/fb511c3f1ac447309368d7e5432c6c79来源:牛客网如果一个数字能表示为p^q(^表示 ...

  7. Oracle物化视图，物化视图日志，增量刷新同步远程数据库

    1.创建DBLINK -- Drop existing database link drop public database link LQPVPUB; -- Create database link ...

  8. dfs 无向图两节点间的所有路径

    标题:风险度量 X星系的的防卫体系包含 n 个空间站.这 n 个空间站间有 m 条通信链路,构成通信网.两个空间站间可能直接通信,也可能通过其它空间站中转. 对于两个站点x和y (x != y), 如 ...

  9. Opencv2.4.13 与Visual Studio2013 环境搭建配置

        opencv这个工具来进行图像处理.大致是使用C++语言编写程序实现识别算法的实现,所以首先就要进行opencv与VS环境的配置. Shaine属于那种半路出家之人都算不上的那种,本科期间三四 ...

  10. Git修改提交注释

    修改本地最近一次已提交的注释 git commit --amend 如果已经上传到了github上,因此github的提交和已修改的提交不一样,推送到远程可以用下面命令强制修改 git push or ...