使用原生Javascript实现城市选择逐级联动

最新推荐文章于 2025-05-17 16:43:29 发布

underdogs

最新推荐文章于 2025-05-17 16:43:29 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/underdogs/article/details/53780589

前端专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现网站上地点联动选择的方法。通过将地点数据存储为全局变量，并利用函数动态生成下拉菜单的方式，实现了省市区三级联动。文章详细展示了如何构建地点数据结构及对应的JavaScript函数。

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

最近研究某些网站的地点选择，其将所有站点名称存储到一个全局变量里面，通过函数调用该变量进行解析。

基本思路就是，几级联动关系到数组选择维度，如要实现2级联动，需要一个二维数组存储数据。

	<select onchange="showcity(this.value)" id="pro">
		<option value="浙江省">浙江省</option>
		<option value="广东省">广东省</option>
	</select>
	<select id="city" onchange="var pro=document.getElementById('pro');showxian(pro.value,this.value)">
		<option value="0">请选择城市</option>
	</select>
	<select name="xian" id="xian">
		<option value="0">请选择县区</option>
	</select>

js代码部分

var cityList = {
	浙江省:[
		['杭州市',[
			'滨江区'
		]],
		['宁波市',[
			'海曙区'
		]]
	],
	广东省:[
		['广州市',[
			'白云区',
			'高新区'
		]],
		['深圳市',[
			'某某区',
			'某某区'
		]]
	]
};
function showcity(p)
{
	var pro,city,x;
	if(typeof(cityList[p])!='undefined')
	{
		pro = cityList[p];			
		var sec = document.getElementById('city');
			sec.options.length=0;
		for(var i=0;i<pro.length;i++)
		{			

			var opt = document.createElement('option');
			opt.value=pro[i][0];//城市值
			opt.innerHTML = pro[i][0];
			sec.appendChild(opt);
		}
	}
}

function showxian(pro,x)
{
	var p = cityList[pro];
	var city;
	var xian;
	if(typeof(p)!='undefined')
	{
		if(p.length!=0)
		{
			for(var i=0;i<p.length;i++)
			{
				if(p[i][0]==x)
				{
					var xian=document.getElementById('xian');
					xian.options.length=0;
					for(var j=0;j<p[i][1].length;j++)
					{
						var opt = document.createElement('option');
						opt.value=p[i][1][j];
						opt.innerHTML = opt.value;
						xian.appendChild(opt);
					}
				}
			}
		}
	}
}