JavaScript省市联动菜单

最新推荐文章于 2020-05-20 21:55:17 发布

hymKing

最新推荐文章于 2020-05-20 21:55:17 发布

阅读量1.6k

点赞数 2

分类专栏： web前端文章标签：联动菜单 javascript

本文链接：https://blog.csdn.net/hymking/article/details/25251711

版权

web前端专栏收录该内容

21 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//初始化一个二维数组存储城市列表项
var cities=[
           ["安庆","合肥","桐城"],
           ["石家庄","保定","唐山"],
           ["郑州","洛阳","开封"]
           ];
//选中某个省份时候，调用添加城市的方法
function provinceChanged(sel){
	//alert("select的长度"+sel.options.length);
	//sel其实就是select对象
	//遍历options集合，查找选中的选项
	for(var x=0;x<sel.options.length;x++)
		{
		var opt=sel.options[x];
		if(opt.selected)
			{
			//给被选择的城市的select 添加option
			addCityToSelect(x)
			}
		}
}
//添加选中省份下的城市项到city的select中
function addCityToSelect(x){
	//从二维数组中找出对应的城市
	var city=cities[x-1];
	var citySelect=document.getElementById("select_city");
	/*==================删除节点中已经存在的元素===============
	在第二次或第n次调用方法的时候城市select对象中已经添加了之前添加的节点，所以有清空。
	思路1：select对象的removeChild(),所以通过循环遍历可以删除字节点。
	思路2：直接设置select.options.length=1可以实现相同效果。
	*/
	//设置城市的select对象下的options长度为1
	citySelect.options.length=1;
	//设置options集合的长度，删除
	//citySelect.options.length=1;
	for(var x=0;x<city.length;x++)
		{
		//创建元素节点对象
		var optionName=document.createElement("option");
		//给option设置显示内容
		optionName.innerHTML=city[x];
		//将创建的option添加到select
		citySelect.appendChild(optionName);
		/*
		在这个地方将某一个省份下面的所有城市添加到citySelect对象下面以后
		当第二次选择第二个省份的时候，第二个省份的下面的所有城市有会被追加到
		citySelect节点下面。这样的效果就错了。所以要求在每次添加之前，要
		对citySelect节点下面的内容进行清空。接着看：
		==================删除节点中已经存在的元素===============
		*/
		}	
}
</script>
</head>
<body>
<select οnchange="provinceChanged(this);">
<!--this的含义：是指select对象调用provinceChanged(this),并且在此方法中
把对象本身作为参数传递，以便对其进行操作。 -->
<option>请选择省份</option>
<option>安徽</option>
<option>河北</option>
<option>河南</option>
</select>
<select id="select_city">
<option>请选择城市</option>
</select>
</body>
</html>

hymKing

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
1
评论
JavaScript省市联动菜单

Insert title here//初始化一个二维数组存储城市列表项var cities=[ ["安庆","合肥","桐城"], ["石家庄","保定","唐山"], ["郑州","洛阳","开封"] ];//选中某个省份时候，调用添加城市的方法function provinceChanged(se
复制链接

扫一扫