<!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: 30px9;
}
</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>
zoukankan
html css js c++ java
-
关于下拉框列表不可选择相同值的设置一：当前下拉框不可选
-
相关阅读:
（转）一文讲清TCP/IP 协议
Java框架之Spring Boot和Spring Cloud区别
php大力力 [006节]初步接触认识phpMyAdmin
php大力力 [005节] php大力力简单计算器001
php大力力 [004节]PHP常量MAMP环境下加载网页
php大力力 [003节]php在百度文库的几个基础教程mac环境下文本编辑工具
php大力力 [002节]mac php环境安装，mamp安装 ，phpMyAdmin启动
php大力力 [001节]2015-08-21.php在百度文库的几个基础教程新手上路日记 大力力php 大力同学 2015-08-21 15:28
C# DataSet与DataTable的区别和用法 ---转载
【SqlServer】利用sql语句附加，分离数据库-----转载
- 原文地址：https://www.cnblogs.com/aaron-pan/p/6700500.html
Copyright © 2011-2022 走看看