首页 > 代码库 > 关于下拉框列表不可选择相同值的设置一:当前DOM不可选

关于下拉框列表不可选择相同值的设置一:当前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="http://www.mamicode.com/0">请选择</option>
<option value="http://www.mamicode.com/1">1</option>
<option value="http://www.mamicode.com/2">2</option>
<option value="http://www.mamicode.com/3">3</option>
<option value="http://www.mamicode.com/4">4</option>
<option value="http://www.mamicode.com/5">5</option>
</select>

<select class="ipt sortList">
<option value="http://www.mamicode.com/0">请选择</option>
<option value="http://www.mamicode.com/1">1</option>
<option value="http://www.mamicode.com/2">2</option>
<option value="http://www.mamicode.com/3">3</option>
<option value="http://www.mamicode.com/4">4</option>
<option value="http://www.mamicode.com/5">5</option>
</select>

<select class="ipt sortList">
<option value="http://www.mamicode.com/0">请选择</option>
<option value="http://www.mamicode.com/1">1</option>
<option value="http://www.mamicode.com/2">2</option>
<option value="http://www.mamicode.com/3">3</option>
<option value="http://www.mamicode.com/4">4</option>
<option value="http://www.mamicode.com/5">5</option>
</select>

<select class="ipt sortList">
<option value="http://www.mamicode.com/0">请选择</option>
<option value="http://www.mamicode.com/1">1</option>
<option value="http://www.mamicode.com/2">2</option>
<option value="http://www.mamicode.com/3">3</option>
<option value="http://www.mamicode.com/4">4</option>
<option value="http://www.mamicode.com/5">5</option>
</select>

<select class="ipt sortList">
<option value="http://www.mamicode.com/0">请选择</option>
<option value="http://www.mamicode.com/1">1</option>
<option value="http://www.mamicode.com/2">2</option>
<option value="http://www.mamicode.com/3">3</option>
<option value="http://www.mamicode.com/4">4</option>
<option value="http://www.mamicode.com/5">5</option>
</select>

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

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