原生js实现下拉级联操作+通过disabled对下拉框不使用
来源：互联网 发布：c语言中的error 编辑：程序博客网 时间：2024/06/15 11:09
<!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>
- 原生js实现下拉级联操作+通过disabled对下拉框不使用
- js实现下拉框三级级联
- 使用CascadingDropDown实现级联式下拉框
- 使用CascadingDropDown实现级联式下拉框
- 使用CascadingDropDown实现级联式下拉框
- 使用CascadingDropDown实现级联式下拉框
- 使用Spinner实现城市级联下拉框
- 原生JS实现下拉刷新
- 原生js实现对select下拉列表的内容过滤
- Dynamics CRM 2015 通过JS控制下拉框实现国家省市级联
- js 下拉框二级联
- 下拉框级联操作问题
- 不使用js实现下拉菜单
- AJAX实现级联下拉框
- JavaScript实现级联下拉框
- AJAX实现级联下拉框
- Ajax 实现级联下拉框
- js对select下拉框的操作
- python网络编程之udp
- VS生成事件 Pre/Post-Build Event
- XML解析
- Mac下VSCode导入c语言头文件警告
- RTC驱动系统分析
- 原生js实现下拉级联操作+通过disabled对下拉框不使用
- mapReduce使用分布式缓存机制
- Gamma校正原理及实现
- Linux-基础命令与文件系统认识（一）
- 第一篇blog
- spring学习----线程池
- 使用python进行whois查询并存入数据库
- Jenkins 日程表配置
- 高阶图匹配
