码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-04-12 18:44:37      阅读:205      评论:0      收藏:0      [点我收藏+]

标签:selected   amp   on()   cli   com   web   cti   charset   ges   

<!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不可选

标签:selected   amp   on()   cli   com   web   cti   charset   ges   

原文地址:http://www.cnblogs.com/aaron-pan/p/6700500.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!