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

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

时间： 2024-10-27 17:53:54

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

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

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

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

首先先构建绑定下拉框的数据源 private void GetSalesList() { var userList = _rmaExpressAppService.GetUserList(); TempData["RMASalesList"] = new SelectList(userList, "Id", "UserName");//选择 userList中的Id作为 Value,选择·UserName 作为Text显示 } 然后构建前台,推荐

GridView 中绑定DropDownList ,下拉框默认选中Label的值

在GridView中,我们有时候要绑定值. 前台绑定的代码可以这样 <asp:TemplateField HeaderText="当前状态" ItemStyle-HorizontalAlign="Center"> <EditItemTemplate> <asp:DropDownList ID="dStatus" DataSource='<%#BindStatus()%>' DataTextField=&

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

select下拉框作为前端开发者应该是经常使用的,最近在项目中遇到这样的情况,点击下拉框选项,需要获取所点击的option的属性值,当时想很简单啊,给option加一个点击事件不就行了,然后就加了一下,结果一运行悲催了,怎么点击option事件就是不会执行.这是为什么呢,刚开始也不懂,之前没遇到过这样的需求,后来经过学习,才恍然大悟,原来select option没有点击事件,要想获得所选option的属性值,需要通过jquery的change()方法来获取,下面通过代码解释一下,代码如下: <

获取下拉框第一个选项的值、最后一个选项的值、第二个选项的值

//假设网页里有下面这样一个下拉框 <select id="angelweb"> <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> <

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

JavaScript获取select下拉框中的第一个值 1.说明获取select下拉框中的第一个值 2.实现源代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm

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

select change下拉框选项变化判断选中值,添加(attr)或移除(removeAttr)一个或多个属性 $("#IsRecommend").change(function () { var isCheck = $(this).children('option:selected').val(); if (isCheck == "true") { $("#CategoryId").css("display", "

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

1. js动态加载元素并设置属性摘自(http://www.liangshunet.com/ca/201408/336848696.htm) <div id="parent"></div> function addElementDiv(obj) { var parent = document.getElementById(obj); //添加 div var div = document.createElement("div"); //设

AngularJS: 使用ng-option生成下拉框,添加全部选择项

效果图如下: HTML代码: <div class="controls pull-left"> 消费类型: <select id="selectType" ng-model="currentType" ng-options="optiontype.id as optiontype.typeName for optiontype in typemodel"> </select> </di