500元精品仿站

JavaScript实现下拉框省市区联动

大鱼君 2019-09-02 建站相关 关键词:select,下拉框,三级联动,省市区

在前端代码编写过程中,经常会遇到需要表单的需求。客户填写表单如果有省市区地址栏目的话,就会用到下拉框。本文分享如何用JavaScript实现select下拉框的省、市、区三级联动。

效果如下图:

JavaScript实现下拉框省市区联动

HTML代码如下:

<select class="province" name="province" onchange="getCity()">
	<option value="0">所在省</option>
	<option value="直辖市">直辖市</option>
	<option value="广东省">广东省</option>
	<option value="江苏省">江苏省</option>
	<option value="福建省">福建省</option>    
</select>
<select  class="city" name="city" onchange="getDistrict()">
	<option value="0">所在市</option>
</select>
<select class="edistrictName" name="edistrictName">
	<option value="0">所在区</option>
</select>

JavaScript代码如下:

var city = [
	["北京市", "天津市", "上海市", "重庆市"],
	["广州市", "深圳市", "珠海市", "东莞市"],
	["南京市", "苏州市", "南通市", "常州市"],
	["福州市", "厦门市", "莆田市", "泉州市"]
];
var edistrictName = [
	[
		["东城区", "西城区", "宣武区"],
		["和平区", "红桥区", "塘沽区"],
		["杨浦区", "徐汇区"],
		["万州区", "涪陵区"]
	],
	[
		["天河区", "海珠区", "白云区", "番禺区"],
		["南山区", "宝安区", "福田区"],
		["香洲区", "斗门区", "金湾区"],
		["东城区", "莞城区", "万江区"]
	],
	[
		['玄武区', '白下区', '秦淮区', '建邺区'],
		['沧浪区', '平江区', '金阊区', '虎丘区'],
		['崇川区', '港闸区', '海安县', '如东县'],
		['天宁区', '钟楼区', '新北区']
	],
	[
		['鼓楼区', '台江区', '仓山区', '马尾区'],
		['思明区', '海沧区', '湖里区', '集美区'],
		['城厢区', '涵江区', '荔城区', '秀屿区'],
		['鲤城区', '丰泽区', '洛江区', '泉港区']
	]
];

function getCity() {
	//获得省份下拉框的对象
	var sltProvince = document.forms[0].province;
	//获得城市下拉框的对象
	var sltCity = document.forms[0].city;
	//获得市区下拉框的对象
	var sltDistrict = document.forms[0].edistrictName;
	//得到对应省份的城市数组
	var provinceCity = city[sltProvince.selectedIndex - 1];
	//清空城市下拉框,仅留提示选项
	sltCity.length = 1;
	sltDistrict.length = 1;
	//将城市数组中的值填充到城市下拉框中
	for(var i = 0; i < provinceCity.length; i++) {
		sltCity[i + 1] = new Option(provinceCity[i], provinceCity[i]);
	}
}

function getDistrict() {
	var sltProvince = document.forms[0].province;
	//获得城市下拉框的对象
	var sltCity = document.forms[0].city;
	//获得市区下拉框的对象
	var sltDistrict = document.forms[0].edistrictName;
	//得到对应城市的市区数组
	var cityDistrict = edistrictName[sltProvince.selectedIndex - 1][sltCity.selectedIndex - 1];
	//清空城市下拉框,仅留提示选项
	sltDistrict.length = 1;
	//将市区数组中的值填充到市区下拉框中
	for(var i = 0; i < cityDistrict.length; i++) {
		sltDistrict[i + 1] = new Option(cityDistrict[i], cityDistrict[i]);
	}
}

注意修改时,select 的name 属性要与 javascript 中的属性对应哦

500元精品仿站
说点什么吧
  • 全部评论(0
    还没有评论,快来抢沙发吧!

Hello, 欢迎加入DEDECMS技术交流群,一起讨论织梦建站!

我要入群

织梦模板推荐

  • 台湾茶饮加盟类织梦网站模板(自适应)
  • 养老机构织梦网站模板(自适应)
  • 生物科技公司品牌展示网站织梦模板(自适应)
  • 家具品牌产品展示类织梦模板(自适应)
500元精品仿站

我来推荐一个更牛逼的给你看看?

  • 猛戳我吧