jQuery实现省级联动效果——源码

一、效果图

这里写图片描述

二、index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jQuery实现省级联动</title>
	</head>
	<body>
		
		<div>
			<select id="province" name="province">
				<option value="">--请选择--</option>
			</select>省
			<select id="city" name="city">
				<option value="">--请选择--</option>
			</select>市
			<select id="district" name="district">
				<option value="">--请选择--</option>
			</select>区/县

		</div>

		<script type="text/javascript" src="js/data.js" ></script>
		<script type="text/javascript" src="js/jquery-1.12.4.min.js" ></script>
		
		<script>
			
			$(document).ready(function(){
				var $province = $("#province");
				var $city = $("#city");
				var $district = $("#district");
				var option = "";
				// 默认禁用城市和区县乡下拉框
				$city.attr("disabled", true);//属性设置为true和disabled都可以
				$district.attr("disabled", "disabled");
				
				/*
				 * 加载所有省份
				 */
				for (var i = 0; i < proviceJson.length; i++) {
					option += "<option value=\""+i+"\">"+proviceJson[i].name+"</option>"
				}
				$province.append(option);
				
				/*
				 * 根据省份获取城市
				 */
				$province.change(function() {
					option = "<option value=''>--请选择--</option>";
					// 激活城市下拉框
					$city.attr("disabled", false);
					// 清空城市下拉框
					$city.empty();
					// 清空区县乡下拉框,并添加默认"--请选择--"选项
					$district.empty();
					$district.append(option);
					// 获取省份下的城市数组
					var proVal = $(this).val();
					var cityArr = proviceJson[proVal].city;
					for (var i = 0; i < cityArr.length; i++) {
						option += "<option value=\""+i+"\">"+cityArr[i].name+"</option>"
					}
					$city.append(option);
				});
				
				
				/*
				 * 根据城市获取区县乡
				 */
				$city.change(function() {
					// 激活区县乡下拉框
					$district.attr("disabled", false);
					// 获取城市下的区县乡数组
					var proVal = $province.val();
					var cityVal = $(this).val();
					var districtArr = proviceJson[proVal].city[cityVal].districtAndCounty;
					option = "";
					for (var i = 0; i < districtArr.length; i++) {
						option += "<option value=\""+i+"\">"+districtArr[i]+"</option>"
					}
					$district.append(option);
				});
				
			});
			
		</script>
		
	</body>
</html>

三、data.js(模拟数据)

var proviceJson = [{
	name: "北京市",
	city: [{
		name: "北京市",
		districtAndCounty: ["东城区", "西城区", "崇文区", "宣武区", "朝阳区", "丰台区", "石景山区", "海淀区", "门头沟区", "房山区", "通州区", "顺义区", "昌平区", "大兴区", "怀柔区", "平谷区", "密云县", "延庆县", "延庆镇"]
	}]
}, {
	name: "重庆市",
	city: [{
		name: "重庆市",
		districtAndCounty: ["渝中区", "大渡口区", "江北区", "沙坪坝区", "九龙坡区", "南岸区", "北碚区", "万盛区", "双桥区", "渝北区", "巴南区", "万州区", "涪陵区", "黔江区", "长寿区", "合川市", "永川区市", "江津市", "南川市", "綦江县", "潼南县", "铜梁县", "大足县", "荣昌县", "璧山县", "垫江县", "武隆县", "丰都县", "城口县", "梁平县", "开县", "巫溪县", "巫山县", "奉节县", "云阳县", "忠县", "石柱土家族自治县", "彭水苗族土家族自治县", "酉阳土家族苗族自治县", "秀山土家族苗族自治县"]
	}]
}, {
	name: "河北省",
	city: [{
		name: "石家庄市",
		districtAndCounty: ["长安区", "桥东区", "桥西区", "新华区", "裕华区", "井陉矿区", "辛集市", "藁城市", "晋州市", "新乐市", "鹿泉市", "井陉县", "微水镇", "正定县", "正定镇", "栾城县", "栾城镇", "行唐县", "龙州镇", "灵寿县", "灵寿镇", "高邑县", "高邑镇", "深泽县", "深泽镇", "赞皇县", "赞皇镇", "无极县", "无极镇", "平山县", "平山镇", "元氏县", "槐阳镇", "赵县", "赵州镇"]
	}, {
		name: "张家口市",
		districtAndCounty: ["桥西区", "桥东区", "宣化区", "下花园区", "宣化县", "张家口市宣化区", "张北县", "张北镇", "康保县", "康保镇", "沽源县", "平定堡镇", "尚义县", "南壕堑镇", "蔚县", "蔚州镇", "阳原县", "西城镇", "怀安县", "柴沟堡镇", "万全县", "孔家庄镇", "怀来县", "沙城镇", "涿鹿县", "涿鹿镇", "赤城县", "赤城镇", "崇礼县", "西湾子镇"]
	}, {
		name: "承德市",
		districtAndCounty: ["双桥区", "双滦区", "鹰手营子矿区", "承德县", "下板城镇", "兴隆县", "兴隆镇", "平泉县", "平泉镇", "滦平县", "滦平镇", "隆化县", "隆化镇", "丰宁满族自治县", "大阁镇", "宽城满族自治县", "宽城镇", "围场满族蒙古族自治县", "围场镇"]
	}, {
		name: "秦皇岛市",
		districtAndCounty: ["海港区", "山海关区", "北戴河区", "昌黎县", "昌黎镇", "抚宁县", "抚宁镇", "卢龙县", "卢龙镇", "青龙满族自治县", "青龙镇"]
	}]

}];


  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery实现省市联动可以通过以下步骤来实现: 1. 创建省市区的数据源:你可以在JavaScript中创建一个包含省市区数据的对象或者从后台获取数据。例如: ```javascript var data = { provinces: [ { name: '省份1', cities: ['城市1', '城市2'] }, { name: '省份2', cities: ['城市3', '城市4'] } ], cities: [ { name: '城市1', districts: ['区域1', '区域2'] }, { name: '城市2', districts: ['区域3', '区域4'] } ], districts: [ { name: '区域1' }, { name: '区域2' }, { name: '区域3' }, { name: '区域4' } ] }; ``` 2. 创建HTML结构:你可以在HTML中创建三个下拉框,分别用于显示省、市、区的选择。例如: ```html <select id="province"> <option value="">请选择省份</option> </select> <select id="city"> <option value="">请选择城市</option> </select> <select id="district"> <option value="">请选择区域</option> </select> ``` 3. 编写jQuery代码:根据选择的省份和城市,动态更新市区的下拉框选项。例如: ```javascript // 省份下拉框改变事件 $('#province').change(function() { var province = $(this).val(); var cities = data.provinces.find(function(item) { return item.name === province; }).cities; // 清空城市和区域下拉框 $('#city').empty().append('<option value="">请选择城市</option>'); $('#district').empty().append('<option value="">请选择区域</option>'); // 更新城市下拉框选项 cities.forEach(function(city) { $('#city').append('<option value="' + city + '">' + city + '</option>'); }); }); // 城市下拉框改变事件 $('#city').change(function() { var city = $(this).val(); var districts = data.cities.find(function(item) { return item.name === city; }).districts; // 清空区域下拉框 $('#district').empty().append('<option value="">请选择区域</option>'); // 更新区域下拉框选项 districts.forEach(function(district) { $('#district').append('<option value="' + district + '">' + district + '</option>'); }); }); ``` 这样,当选择省份时,城市下拉框会根据选择的省份进行更新;当选择城市时,区域下拉框会根据选择的城市进行更新。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值