HTML学习15 js 三级联动

最新推荐文章于 2024-04-28 10:45:38 发布

林⁣熙

最新推荐文章于 2024-04-28 10:45:38 发布

阅读量146

点赞数

分类专栏： js HTML 文章标签： javascript

本文链接：https://blog.csdn.net/lx1315998513/article/details/106181716

版权

HTML 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

8 篇文章 0 订阅

订阅专栏

三级联动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		省：<br>
		<select name="sheng" id="sheng">
			<option value="">请选择</option>
		</select>
		<br>
		市：<br>
		<select name="shi" id="shi">
			<option value="">请选择</option>
		</select>
		<br>
		区：<br>
		<select name="qu" id="qu">
			<option value="">请选择</option>
		</select>

		<script type="text/javascript">
			onload = function() {
				var json = {
					"北京": [{
						"北京市": ["朝阳", "海定"]
					}],
					"广东": [{
						"广州市": ["越秀", "天河"]
					}, {
						"深圳市": ["罗湖", "福田"]
					}],
					"湖南": [{
						"长沙市": ["长沙", "芙蓉"]
					}, {
						"衡阳市": ["南岳", "衡阳"]
					}]
				};


				var sheng = document.getElementById("sheng");


				for (var i in json) { //使用for  in 迭代对象，变量i就是key
					/* 	console.log(i); */
					var shengOpt = document.createElement("option");

					var shengtxt = document.createTextNode(i);
					shengOpt.appendChild(shengtxt);
					shengOpt.value = i;
					sheng.appendChild(shengOpt);
				}


				sheng.onchange = function(event) {
					/* console.log(1); */
					/* console.log(sheng.value); */
					//又要解析json
		
					var shiArray = json[sheng.value];
					console.log(shiArray);
					var shi = document.getElementById("shi");
					//在追加之前清空选项内容
					shi.innerHTML = "";
					//添加请选择
					var shiOpt = document.createElement("option");
					var shiOptTxt = document.createTextNode("请选择");
					shiOpt.appendChild(shiOptTxt);
					shi.appendChild(shiOpt);

					for (let s of shiArray) {
						for (var i in s) {
							/* console.log(i); */
							var shiOpt = document.createElement("option");
							var shiOptTxt = document.createTextNode(i);
							shiOpt.appendChild(shiOptTxt);
							shiOpt.value = i;
							shi.appendChild(shiOpt);
						}
					}
				}
				
				
				var shi = document.getElementById("shi");
				shi.onchange = function(){
					console.log(this.value);
					console.log(sheng.value);
					
					var shi = json[sheng.value];
					var qu = document.getElementById("qu");
					
					qu.innerHTML = "";
					//添加请选择
					var quOpt = document.createElement("option");
					var quOptTxt = document.createTextNode("请选择");
					quOpt.appendChild(quOptTxt);
					qu.appendChild(quOpt);
					
					
					for (var item of shi) {
						var quval = item[this.value];
						if(quval){
							for (var item of quval) {
								var quOpt = document.createElement("option");
								var quOptTxt = document.createTextNode(item);
								quOpt.appendChild(quOptTxt);
								quOpt.value = item;
								qu.appendChild(quOpt);
							}
						}
					}
					
				}

			};

			/* 做一个三级联动
			数据是：
			var json = {
						"北京": [{
							"北京市": ["朝阳", "海定"]
						}],
						"广东": [{
							"广州市": ["越秀", "天河"]
						}, {
							"深圳市": ["罗湖", "福田"]
						}],
						"湖南": [{
							"长沙市": ["长沙", "芙蓉"]
						}, {
							"衡阳市": ["南岳", "衡阳"]
						}]
					}; 
			1.js的渲染  select 标签的渲染
			2.json数据的解析
			*/
		</script>
	</body>
</html>

林⁣熙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML学习15 js 三级联动

三级联动<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> 省：<br> <select name="sheng" id="sheng"> <option value="">请选择</option> </sele
复制链接

扫一扫