javascript实现两个select选择框内容动态绑定

最新推荐文章于 2025-09-04 12:32:31 发布

原创最新推荐文章于 2025-09-04 12:32:31 发布 · 1w 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#教程 #javascript #ajax #html #select

教程同时被 3 个专栏收录

3 篇文章

订阅专栏

javascript

1 篇文章

订阅专栏

ajax

1 篇文章

订阅专栏

本文介绍如何利用Ajax实现网页中Select元素的动态更新。通过两个Select框展示省市区联动效果，用户选择省份后，城市Select框会自动更新对应省份的城市选项。

1. 有时候需要实现当用户选择一个选项之后，网页上另一部分的内容就随之变化，达到动态更新的目的，这时候我们就会想到ajax来实现局部刷新，接下来用一个简单的例子演示：总共有两个select选择框，第一个是省份的选择，第二个是对应省份的城市的选择，目标是实现当用户切换省份的时候，城市选择框中的选项全部替换为对应省份的城市：

对应的html代码，主体就是两个选择框

<div class="container">
<span style="white-space:pre">	</span><select name="province" id="proSelector">
		<option value="请选择省份">请选择省份</option>
	</select>

	<select name="city"  id="citySelector">
		<option value="请选择城市">请选择城市</option>
	</select>
</div>

：

基本效果类似下图：

接下来为select框添加option：

为避免手动写入大段重复的html代码，我们采用js来实现option的增添，首先我们需要省份信息数据，以json格式数据为例，province.json，格式如下（由于数据太长，只粘贴部分作展示，完整版请参看源码）：

[{
    "ProID": 1,
    "name": "北京市",
    "ProSort": 1,
    "ProRemark": "直辖市"
}, {
    "ProID": 2,
    "name": "天津市",
    "ProSort": 2,
    "ProRemark": "直辖市"
}, {
    "ProID": 3,
    "name": "河北省",
    "ProSort": 5,
    "ProRemark": "省份"
}]

然后通过js遍历json去为每个省份添加一个option：

$.get('../src/province.json', function(data) {
	for (var i in data) {
		$("#proSelector").append("<option value='"+data[i].name+"'>"+data[i].name+"</option>");
	};
});

然后就能得到下图所示效果，省份数据已经添加：

左侧为省份选择器，用户可以切换选择的省份信息：

接下来为右侧select动态添加城市：

首先我们得知道当前用户选择的省份信息，一句话搞定：

var selectedPro = $("#proSelector").val();

然后我们需要一份全国城市的数据，仍然以json格式数据为例city.json（由于数据太长，只粘贴部分作展示，完整版请参看源码）：

[{
    "CityID": 1,
    "name": "北京市",
    "ProID": 1,
    "CitySort": 1
}, {
    "CityID": 2,
    "name": "天津市",
    "ProID": 2,
    "CitySort": 2
}, {
    "CityID": 3,
    "name": "上海市",
    "ProID": 9,
    "CitySort": 3
}]

遍历城市信息，从中提取当前所选省份拥有哪些城市，我们可以通过ProID去寻找，所以我们首先从province.json中获取这个ID：

function getProID(proName, cb) {
	var proID = null;
	$.get('../src/province.json', function(data) {
		for (var i in data) {
			if(proName == data[i].name){
				proID = data[i].ProID;
				cb(proID);
			};
		};
	});
}

然后用这个proID去city.json中匹配城市信息，并将匹配的城市append到城市选择器的option中，可以将其定义为一个函数updateCity()：

getProID(selectedPro, function(proID) {
	$.get('../src/city.json', function(data) {
		for (var i in data) {
			if(data[i].ProID == proID) {
				$('#citySelector').append("<option value='"+<span style="font-family: Arial, Helvetica, sans-serif;">data[i].name</span>+"'>"+<span style="font-family: Arial, Helvetica, sans-serif;">data[i].name</span>+"</option>");
			}
		};
	});
})

然后为城市动态更新绑定一个事件，选取省份选择器的change事件作为触发：

$('#proSelector').change(function(event) {
<span style="white-space:pre">	</span>updateCity();
})

然后就能得到我们想要的效果：

右侧则为对应的城市选择器：

当用户切换选择的省份时，右侧选择框中的城市信息也会相应更新：

Github: 动态更新select选项