<!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. 每天一个linux命令(25)--Linux文件属性详解

    Linux 文件或目录的属性主要包括:文件或目录的节点.种类.权限模式.链接数量.所归属的用户和用户组.最近访问或修改的时间等内容.具体情况如下: 命令: ls  -lih 2098120 lrwxr ...

  2. Cocos2dx热更新遇到的那些坑

    1.Cocos2dx热更新因为文件名含有空格,ios下载失败bug修改 问题描述: 项目中偶尔遇到美术图片命名时不规范,导致图片名字含有空格.导致ios热更新时,遇到下载失败. 解决方案: 1.从新改 ...

  3. 第十九篇 js高级知识---词法分析和AO 链

    上面一篇文章说了js的作用域链,这一节算是对上面的延申,有一个典型的例子,首先看原来的一段代码: var name = "test"; function t() { var b = ...

  4. 纯CSS3之五子棋（黑白棋）画法

    无聊想用JS写个五子棋玩玩,这边先用CSS3画出了五子棋,感觉挺惊艳的.发上来看看 PS:第一次发博文T-T  此为个人原创. 不多说上图: 代码如下: <!DOCTYPE html> & ...

  5. javascript 常用api

    常用API合集 来源于:https://www.kancloud.cn/dennis/tgjavascript/241852 一.节点 1.1 节点属性 Node.nodeName //返回节点名称, ...

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

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

  7. 用smarty模板做数据实现修改、分页等功能

    先来看怎么把数据库的列表全都显示出来 还是要先建一个php文件,还有html文件,都存到相应的目录下 php文件中 <?php include("../init.inc.php&quo ...

  8. webpack配置React开发环境(上)

    Webpack 是一个前端资源加载/打包工具,我们部门的一条主要技术栈就是Webpack+React+ES6+node,虽然之前自己做个人项目也接触好多次Webpack,但是自己并没有研读总结过Web ...

  9. Java中的for each实现原理与坑

    文章转载自「开发者圆桌」一个关于开发者入门.进阶.踩坑的微信公众号 在Java中,遍历集合和数组一般有以下三种形式: for (int i = 0; i < list.size(); i++) ...

  10. 通讯录--(适配iOS7/8/9)

    导入库#import <AddressBook/AddressBook.h> #import <AddressBookUI/AddressBookUI.h> #pragma m ...