javascript实现两个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选项


©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页