HTML中使用js实现多级列表联动-实例省级列表联动

最新推荐文章于 2021-06-27 06:33:13 发布

yucong0916

最新推荐文章于 2021-06-27 06:33:13 发布

阅读量572

点赞数 1

文章标签： javascript html5 html

本文链接：https://blog.csdn.net/yucong0916/article/details/117911738

版权

使用javaScript实现多级列表联动
这一实例使用在较多场景中，非常实用。具体不多说，直接上代码。

实例

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>省级列表多级联动</title>

</head>
<body>
	<form>
		<select id="province"><option value="-1">请选择</option></select>
		<select id="city"></select>
		<select id="country"></select>
	</form>
		<script type="text/javascript">
	var provinceArr = ["上海","江苏","河北","湖南"]
	var cityArr = [["上海市"],["苏州市","南京市"],["石家庄","秦皇岛"],["长沙","湘潭"]]
	var countryArr = [[["黄埔区","静安区"]],[["虎丘区","吴中区"],["玄武区","秦淮区"]],[["长安区","桥西区"],["海港区","山海关区"]],[["芙蓉区","岳麓区"],["湘潭区"]]]
	function createOption (obj,data) {
		for(var i in data){
			var op = new Option(data[i],i);
			obj.options.add(op)
		}
	}
	var province = document.getElementById("province");
	createOption(province,provinceArr);

	var city = document.getElementById("city");
	province.onchange=function(){
		city.options.length=0;
		createOption(city,cityArr[province.value]);
		if (province.value>=0){
			city.onchange();
		} else {
			country.options.length=0;}
	};
	var country = document.getElementById("country");
	city.onchange=function(){
		country.options.length=0;
		createOption(country,countryArr[province.value][city.value]);
	};

	</script>
</body>
</html>

效果图如下

在这里插入图片描述

yucong0916

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML中使用js实现多级列表联动-实例省级列表联动

使用javaScript实现多级列表联动这一实例使用在较多场景中，非常实用。具体不多说，直接上代码。实例代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>省级列表多级联动</title></head><body> <form> <select id="province"&gt
复制链接

扫一扫