二级联动下拉列表

最新推荐文章于 2023-07-11 17:32:26 发布

CRUD菜鸟

最新推荐文章于 2023-07-11 17:32:26 发布

阅读量322

点赞数 1

分类专栏： JavaScript 文章标签： javascript html

本文链接：https://blog.csdn.net/zymxbc/article/details/107701204

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

二级联动下拉列表

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

用到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>

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

CRUD菜鸟

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
二级联动下拉列表

本人高职萌新一个正在学习希望和大家一起交流学习二级联动下拉列表用到JavaScript和HTMLJavaScript里用到了DOM和事件和函数和分支结构和关系运算符HTML用到表单标签的下拉列表标签<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>省市二级联动</title> <script type="text/javascr.
复制链接

扫一扫