您的位置：首页 > 其它

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

2017-04-12 17:59 337 查看 
<!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：如果前一个下拉框选择的值和当前值一样则前一个下拉框重置，
以此类推。
</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>

<button onclick="endList()" class="ipt">确定输出最后的值</button>
<p></p>
<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("操作click时的值:"+_this);
},
change:function(){
chageSort(this);
}
});

function chageSort(thx){
console.log(thx);
var sortList=$(".sortList");
/*注：index()用法: http://www.jb51.net/article/46769.htm*/ var _index=$(thx).index()-1;
console.log('当前元素下标：'+_index);
var _changeThis=$(thx).find("option:selected").val();
console.log("change事件后当前值："+_changeThis);
/* for(var i=0;i<sortList.length;i++){
var isSelectedVal=sortList.eq(i).find("option:selected").val();
console.log("选择列表的各项值:"+isSelectedVal);
}*/
for(var j=0;j<sortList.length;j++){
var beforeVal=sortList.eq(j).find("option:selected").val();
if(beforeVal==_changeThis && j!=_index){
console.log('j:'+j);
/*注：法一：方法可行，但是不好*/
/*sortList.eq(j).html('<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>');*/
/*注：法二：attr存在不可多次触发的bug，换prop*/
sortList.eq(j).find("option[value='0']").prop("selected","selected");
}
}
}

function endList(){
var arr=[];
var list=$(".sortList");
for(var i=0;i<list.length;i++){
arr.push(list.eq(i).find("option:selected").val());
}
document.querySelectorAll("p")[0].innerHTML=arr;
}
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航