二级联动列表

最新推荐文章于 2023-12-11 18:56:50 发布

原创最新推荐文章于 2023-12-11 18:56:50 发布 · 418 阅读

0 ·

CC 4.0 BY-SA版权

WEB-DOM 专栏收录该内容

36 篇文章

订阅专栏

本文介绍了一个简单的二级联动列表实现方案，通过JavaScript动态生成下拉列表选项，实现了根据省份选择相应城市的交互效果。此方法适用于需要根据上级选项变化而动态加载下级选项的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<span style="font-size:18px;"><!DOCTYPE HTML>
<html>
<head>
<title>二级联动列表</title>
<meta charset="utf-8" />
<style>
	.hide{ display: none; }
</style>
<script>
	/*实现“省”和“市”的级联下拉列表*/
	var cities=[[],		/*0号下标没有元素*/
[{"name":'东城区',"value":101},
 {"name":'西城区',"value":102},
 {"name":'海淀区',"value":103},
 {"name":'朝阳区',"value":104}],
[{"name":'河东区',"value":201},
 {"name":'河西区',"value":202},
 {"name":'南开区',"value":303}],
[{"name":'石家庄市',"value":301},
 {"name":'廊坊市',"value":302},
 {"name":'保定市',"value":303},
 {"name":'唐山市',"value":304},
 {"name":'秦皇岛市',"value":304}]
			];
	function loadCities(sel){
		//获得选中项的下标,保存在变量i中
		var i=sel.selectedIndex;
		//从cities中获取i位置的子数组，保存在变量currCities
		var currCities=cities[i];
		//获取sel的下一个兄弟元素，保存在变量selCities中
		var selCities=sel.nextElementSibling;
		//如果currCities为空，就设置selCities的class为hide
		if(currCities.length==0){selCities.className="hide"}
		else{//否则
			selCities.innerHTML="";//清空selCities的内容
			//创建文档片段:frag
			var frag=document.createDocumentFragment();
		/*核心DOM
			//创建一个option元素
			var opt=document.createElement("option");
			//设置option的内容为-请选择-
			opt.innerHTML="-请选择-";
			opt.value=-1;//设置option的value为-1
		*/
			var opt=new Option("-请选择-",-1);//HTML DOM
			//将option临时追加到frag中
			frag.appendChild(opt);
			//遍历currCities中每个城市对象
			for(var i=0;i<currCities.length;i++){
			/*核心DOM
				//创建option对象
				var opt=document.createElement("option");
				//设置option对象的内容为当前城市对象的name属性
				opt.innerHTML=currCities[i].name;
				//设置option对象的value为当前城市对象的value属性
				opt.value=currCities[i].value;
			*/
				var opt=new Option(
					currCities[i].name,currCities[i].value);
				frag.appendChild(opt);//将option对象追加到frag
			}//(遍历结束)
			//将frag追加到selCities中
			selCities.appendChild(frag);
			//清空selCities的class，显示出来
			selCities.className="";
		}
	}
</script>

</head>
<body>
	<select name="provs" onchange="loadCities(this)">
		<option>—请选择—</option><!--0-->
		<option>北京市</option><!--1-->
		<option>天津市</option>
		<option>河北省</option>
	</select>
	
	<select name="cities" class="hide">
		
	</select>
</body>
</html>
</span>