js/jq多个select下拉列表框选中其中一个，控制当前改变后一个下拉列表框显示的数据
程序员文章站
2022-07-13 22:31:01
...
效果如下图所示：
代码部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
</head>
<body>
<div>
<select name="" id="" class="age">
<option value="1">年龄</option>
<option value="2" selected="selected">年龄差</option>
</select>
<select name="" id="">
<option value="1">大于</option>
<option value="2">等于</option>
<option value="3">小于</option>
</select>
</div>
<div>
<select name="" id="" class="age">
<option value="1">年龄</option>
<option value="2">年龄差</option>
</select>
<select name="" id="">
<option value="1">大于</option>
<option value="2">等于</option>
<option value="3">小于</option>
</select>
</div>
<div>
<select name="" id="" class="age">
<option value="1">年龄</option>
<option value="2">年龄差</option>
</select>
<select name="" id="">
<option value="1">大于</option>
<option value="2">等于</option>
<option value="3">小于</option>
</select>
</div>
</body>
<script type="text/javascript">
/**
* 页面刚加载进来的时候，如果选的是年龄，后面只能选小于
*/
$(".age").each(function(){
var thisVal = $(this).children("option:selected").val();
//console.log('this',thisVal);
if (thisVal == 1){
//console.log('t',$(this).next().find("option[value='3']"));
$(this).next().find("option[value='3']").attr("selected",true);
$(this).next().find("option[value='2']").hide();
$(this).next().find("option[value='1']").hide();
}else {
$(this).next().find("option[value='1']").attr("selected",true);
$(this).next().find("option[value='2']").show();
$(this).next().find("option[value='1']").show();
}
});
/**
* 点击下拉列表的时候，如果选的是年龄，后面只能选小于
*/
$(".age").change(function(){
var thisVal = $(this).children("option:selected").val();
if (thisVal == 1){
$(this).next().find("option[value='3']").attr("selected",true);
$(this).next().find("option[value='2']").hide();
$(this).next().find("option[value='1']").hide();
}else {
$(this).next().find("option[value='1']").attr("selected",true);
$(this).next().find("option[value='2']").show();
$(this).next().find("option[value='1']").show();
}
})
</script>
</html>
上一篇： PyQt5——QGridLayout和QFormLayout
下一篇： flex 字体加粗