二级联动下拉列表

二级联动下拉列表 

看了好多二级联动发现都用数组遍历所以试着不用数组锻炼自己的算法

用到JavaScript和HTML
JavaScript里用到了DOM和事件和函数和分支结构和关系运算符
HTML用到表单标签的下拉列表标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>省市二级联动</title>
		<script type="text/javascript">
			function demo(){
				//通过id属性获取select标签对象
				var obj = document.getElementById("d");
				//select标签对象调用value方法获取框体的内容
				var s = obj.value;
				//用分支结构if else判断是否是对应的value值
				if( s == "海南省"){
				//是则通过标签名和下标获取市区列表然后执行用DOM改变原有的市区列表
					var s = document.getElementsByTagName("select")[1];
					s.innerHTML = "<select><option>东方市</option><option>海口市</option><option>三亚市</option><option>儋州市</option></select>";
				}else if( s == "江西省"){
					var s = document.getElementsByTagName("select")[1];
					s.innerHTML = "<select><option>南昌市</option><option>景德镇市</option><option>上饶市</option><option>赣州市</option></select>"
				}else if( s == "北京市"){
					var s = document.getElementsByTagName("select")[1];
					s.innerHTML = "<select><option>朝阳区</option><option>海淀区</option><option>丰台区</option><option>顺义区</option><option>昌平区</option></select>"
				}else if( s == "河北省"){
					var s = document.getElementsByTagName("select")[1];
					s.innerHTML = "<select><option>石家庄</option><option>保定市</option><option>秦皇岛</option><option>唐山市</option><option>邯郸市</option></select>"
				}
			}
		</script>
	</head>
	<body>
		<!--下拉列表的内容改变用onchange内容改变事件调用对应的函数demo -->
		<select id="d" onchange="demo()">
			<option>请选择省/市</option>
			<option>江西省</option>
			<option>海南省</option>
			<option>北京市</option>
			<option>河北省</option>
		</select>
		<select >
			<option>请选择市/区</option>
		</select>
	</body>
</html>

本人高职萌新一个希望和大家一起交流学习

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值