JavaScript 二级联动

最新推荐文章于 2022-09-28 19:29:07 发布

李卫康的博客

最新推荐文章于 2022-09-28 19:29:07 发布

阅读量838

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JAVA 前端知识文章标签： javascript

本文链接：https://blog.youkuaiyun.com/u014010769/article/details/46939757

JAVA 前端知识专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一个简单的JavaScript示例，展示了如何根据用户选择的省份来动态更新对应的城市下拉列表选项。通过监听省份下拉列表的变化事件，实现清除原有城市选项并重新加载相应省份的城市列表。

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

思路：

 <body>
    省份:
	<select id="province">
    	<option value="">请选择</option>
		<option value="河北省">河北省</option>
		<option value="广西省">广西省</option>
		<option value="山东省">山东省</option>
    </select>
	城市:
	<select id="city">
    	<option value="">请选择</option>
    </select>
  </body>

1.首先根据id为province获取当前标签.

2.根据this.value得到当前选择的值.比如山东.

3.创建一个数组，包含省份下的城市.

4.根据当前选择的省份，遍历省份.

5.创建option节点..添加到id为city的标签下

6.测试发现，每次切换的时候要清空当前省份的所有孩子节点
代码：

<script type="text/javascript">
  	document.getElementById("province").onchange=function(){
		var provinceElement=this.value;
		var city=document.getElementById("city");
		var options=city.getElementsByTagName("option");
		for(var i=options.length-1;i>0;i--){
			city.removeChild(options[i]);
		}
		var arry;
		if(provinceElement=="河北省"){
			array=["邢台","石家庄","唐山","邯郸","保定"];
		}else if(provinceElement=="广西省"){
			array=["桂林","南宁","柳州","玉林"];
		}else{
			array=["济南","青岛","烟台","威海"];
		}
		
		for(var i=0;i<array.length;i++){
			var op=document.createElement("option");
			op.setAttribute("value",array[i]);
			var text=document.createTextNode(array[i]);
			op.appendChild(text);
			city.appendChild(op);
		}	
	}
	
  </script>