原生js实现下拉级联操作
<!DOCTYPE html>
<html>
<head>
<script src='static/js/jquery-1.9.1.min.js'></script>
</head>
<div style="width: 2000px">
</div>
<body onload="load()">
<div>
<select class='prov' id='prov' onchange='changeCity()'>
<option value=''>--请选择省--</option>
</select>
<select class='city' id='city'>
<option value=''>--请选择市--</option>
</select>
</div>
<script>
var province=document.getElementById("prov");
var city=document.getElementById("city");
var arr_prov=new Array(new Option("--请选择省--",''),new Option("湖南","hn"),new Option("广东","gd"));
var arr_city=new Array();
arr_city[0]=new Array(new Option("--请选择市--",''));
arr_city[1]=new Array(new Option("长沙",'cs'),new Option("娄底",'ld'),new Option("永州",'yz'));
arr_city[2]=new Array(new Option("广州",'gz'),new Option("深圳",'sz'));
//动态载入所有省份
function load(){
for(var i=0;i<arr_prov.length;i++){
province.options[i]=arr_prov[i];
}
}
//选中省份之后,根据索引动态载入相应城市
function changeCity(){
//清空上次的选项
city.options.length=0;
//获取省一级的下拉列表选中的索引
var index=province.selectedIndex;
for(var i=0;i<arr_city[index].length;i++){
city.options[i]=arr_city[index][i];
}
}
</script>
</body>
</html>
使用disabled
<!DOCTYPE html>
<html lang="en">
<head>
<title>testOptionDisable</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
</head>
<body>
<div style="width: 2000px">
<form action="/*" method="post"
name="pageForm" id="pageForm">
<table>
<tr>
<td>
<div class="pull-left search " style="text-align: center;margin-left: 20px;margin-top: 10px">
使用状态:
<input type="hidden" id="selValStatusType"/>
<select id="status" class="form-control" name="statu" data-placeholder="不限"
style="font-size: 14px;padding: 2px 3px;color: #000;width: 90px">
<option value="">不限</option>
<option value="0" class="c_no">待使用
</option>
<option value="1" class="c_no">使用中
</option>
<option value="2" class="c_no">已使用
</option>
<option value="5" class="c_yes">对外待使用
</option>
<option value="3" class="c_yes">对外使用中
</option>
<option value="4" class="c_yes">对外已使用
</option>
</select>
</div>
<div class="pull-left search " style="text-align: center;margin-left: 20px;margin-top: 6px">
是否可用:
<select
class="form-control" id="statusType" name="statusType"
data-placeholder="不限"
style="font-size: 14px;padding: 2px 3px;color: #000;width: 80px;"
>
<option value="">不限</option>
<option value="0" class="abc">否
</option>
<option value="1" class="efg">是
</option>
</select>
</div>
</td>
</tr>
</table>
</form>
</div>
</body>
<script type="text/javascript">
/*可用状态*/
$("#status").change(function () {
var val = $("#status").val();
if (val == '1' || val == '2' || val == '0') {
$(".efg").attr("disabled", "disabled");
$(".abc").removeAttr("disabled");
} else if (val == '3' || val == '4' || val == '5') {
$(".abc").attr("disabled", "disabled");
$(".efg").removeAttr("disabled");
} else {
$(".efg").removeAttr("disabled");
$(".abc").removeAttr("disabled");
}
})
/*是否可用*/
$("#statusType").change(function () {
var val = $("#statusType").val();
if (val == '0') {
$(".c_yes").attr("disabled", "disabled");
$(".c_no").removeAttr("disabled");
} else if (val == '1') {
$(".c_no").attr("disabled", "disabled");
$(".c_yes").removeAttr("disabled");
} else {
$(".c_no").removeAttr("disabled");
$(".c_yes").removeAttr("disabled");
}
})
</script>
</html>