省市区三级联动(数组、JSON实现)

最新推荐文章于 2024-06-20 14:06:37 发布

Teresa0312

最新推荐文章于 2024-06-20 14:06:37 发布

阅读量5.9k

点赞数 1

分类专栏：前端文章标签： web json

本文链接：https://blog.csdn.net/qq_36894136/article/details/76559295

版权

文章介绍了如何使用数组和JSON数据结构实现省市区三级联动的下拉效果，强调了数据的组织形式对于实现清晰的联动逻辑的重要性，并提供了JS代码示例，展示了从JSON字符串转换为对象以及利用JSON数据进行联动操作的方法。

摘要由CSDN通过智能技术生成

省市区联动下拉效果在WEB中应用非常广泛,尤其在一些会员信息系统、电商网站最为常见。
下面举例一种实现方式：
htlm代码：

<form>
	<select id="proSelect">
		<option>选择省</option>
	</select>
	<select id="citySelect">
		<option>选择市</option>
	</select>
	<select id="areaSelect">
		<option>选择区</option>
	</select>
</form>

js代码：

var pro=document.getElementById("proSelect");
var city=document.getElementById("citySelect");
var area=document.getElementById("areaSelect");
pro.addEventListener("change",addCity);
//将指定的监听器添加到该对象上 当pro触发change事件时 addCity()就会被执行。
city.addEventListener("change",addArea);
pro.add(new Option("陕西省","陕西省"));
//创建一个option对象 new Option(text, value) 并添加到<seletc>中
pro.add(new Option("山东省","山东省"));
function addCity(){
	var choiceVal=pro.value;
	city.options.length=1;
	//options是个数组 里面存放着多个<option>标签 此处长度为1是为了保留默认的<option>
	area.options.length=1;
	if(choiceVal=="陕西省"){
		city.add(new Option("西安市","西安市"));
		city.add(new Option("渭南市","渭南市"));
	}
	else if (choiceVal=="山东省"){
		city.add(new Option("济南市","济南市"));
		city.add(new Option("济宁市","济宁市"));
	}
}
function addArea(){
	var choiceVal=city.value;
	if(choiceVal=="西安市"){
		area.add(new Option("未央区","未央区"));
		area.add(new Option("碑林区","碑