疫情期间学习原生js的动态生成联动菜单_原生js可以动态创建菜单吗-CSDN博客

本文链接：https://blog.csdn.net/qq_40993122/article/details/104968495

  哈哈还是js还是很有意思的

js动态生成联动菜单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>联动菜单</title>
		<script type="text/javascript">
			let datas =
			[ 
				{"pid":1,"pname":"北京","cities":[{"cid":1,"cname":"朝阳区"},{"cid":2,"cname":"大兴区"},{"cid":3,"cname":"海淀区"}]},
				{"pid":2,"pname":"广西","cities":[{"cid":1,"cname":"桂林"},{"cid":2,"cname":"南宁"},{"cid":3,"cname":"百色"}]},
				{"pid":3,"pname":"广东","cities":[{"cid":1,"cname":"佛山"},{"cid":2,"cname":"广州"},{"cid":3,"cname":"深圳"}]},
				{"pid":4,"pname":"江苏","cities":[{"cid":1,"cname":"南京"},{"cid":2,"cname":"连云港"},{"cid":3,"cname":"扬州"}]}
			]
			
			window.onload=function(){
				initProvince();
				initCity(1);
				//需要给sprovince下拉框注册一个事件；
				let province=document.querySelector('#sprovince');
				province.addEventListener('change',function(){
					//获取选择项索引
					let index=this.selectedIndex;
					//options集合
					let ops=this.options;
					let curroption=ops[index];
					let optIndex=curroption.value;
					initCity(optIndex);
				})
			}
			
			function initCity(pid){
				 //找到省对应下的cities;
				 let cities =null;
				 datas.forEach(function(province,index,array){
					if(province.pid == pid){
						cities =province.cities;
					}
				 })
				//把对应的城市放进城市选择框中
                let city=document.querySelector('#scity');
				//清空缓存，当然从新加
                city.options.length=0;
                for (var i = 0; i < cities.length; i++) {
                	let datarow = cities[i];
                	let opt=document.createElement('option');
                	opt.value = datarow.cid;
                	opt.text = datarow.cname;
                	city.append(opt);
                }				
				
				
				}
				
				
			function initProvince(){
				let province=document.querySelector('#sprovince');
				
				for (var i = 0; i < datas.length; i++) {
					let datarow = datas[i];
					let opt=document.createElement('option');
					opt.value = datarow.pid;
					opt.text = datarow.pname;
					province.append(opt);
				}
			}
		</script>
	</head>
	<body>
		<select id="sprovince">
			
			
		</select>
		<select id="scity">
			
		</select>
	</body>
</html>