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

Posted new Object()

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于下拉框列表不可选择相同值的设置一:当前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>

以上是关于关于下拉框列表不可选择相同值的设置一:当前DOM不可选的主要内容,如果未能解决你的问题,请参考以下文章

前端,关于下拉选择

关于EasyUI ComboBox(下拉列表框)能否直接输入文本的问题,详情如图所示。

easyui中如何设置下拉列表框只能选择,列表框内不能输入,

html做网页,关于日期下拉列表框的问题

用jquery设置下拉不可编辑,但是没起作用,求高手指点,急。。。

JavaScript 学习-38.HTML DOM 下拉框 Select 对象