基于Jquery实现省份、城市、区县三级联动

前端感觉写的比较少,也是为了练手,下午没事用来写了这个三级联动,也是第一次写这东西。

据我了解,城市信息可以选择存在数据库或者直接写在前端,为了省事,我直接写在前端,下面是我的代码:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<title></title>
<script src=”http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js”></script>
<script>
$(document).ready(function(){
//省份城市数组
var fujian_city = new Array(‘福州’,’漳州’,’厦门’,’龙岩’,’泉州’,’南平’,’莆田’,’宁德’,’三明’);
var guangdong_city = new Array(‘广州’,’深圳’,’东莞’,’潮州’,’河源’,’汕头’,’珠海’,’佛山’,’肇庆’,’韶关’);

//城市下属区县数组
var fuzhou_county = new Array(‘鼓楼区’,’台江区’,’平潭’,’晋安区’,’马尾区’,’福清市’,’长乐市’,’闽侯县’,’连江县’,’闽清县’);
var zhangzhou_county = new Array(‘芗城区’,’龙文区’,’南靖县’,’平和县’,’龙海市’,’东山县’,’华安县’);
var xiamen_county = new Array(‘湖里区’,’思明区’,’海沧区’,’集美区’,’同安县’,’翔安区’);
//获取省份改变的事件,并设置被选择省份城市信息
$(“#province”).change(function(){
//清空每次选择留下的城市信息
$(“#city”).find(“option”).remove();
//设置未选择的城市默认状态
$(“#city”).append(‘<option value=”未选择”>未选择</option>’);
//获取被选中省份的值
var province=$(“#province”).val();
//设置城市的自定义函数
$.extend({set_cities:function(province){
var arr_length = province.length;
for(var i=1;i<=arr_length;i++){
var place_info = ‘<option value=’+province[i-1]+’>’+province[i-1]+'</option>’;
$(“#city”).append(place_info);
}
}});
switch(province){
case ‘福建’:
$.set_cities(fujian_city);
break;
case ‘广东’:
$.set_cities( guangdong_city);
break;
default :
alert(‘没有写信息的省份,这里只展示福建和广东两个省份’);
}
})
//获取改变城市的事件,并设置区县信息,这里只写了福建的福州、漳州、厦门的部分城市信息
$(“#city”).change(function(){
//清空每次选择留下的区县信息
$(“#county”).find(“option”).remove();
//设置未选择的区县默认状态
$(“#county”).append(‘<option value=”未选择”>未选择</option>’);
//获取被选中城市的值
var city=$(“#city “).val();
//设置区县的自定义函数
$.extend({set_counties:function(city){
var arr_length = city.length;
for(var i=1;i<=arr_length;i++){
var place_info = ‘<option value=’+city[i-1]+’>’+city[i-1]+'</option>’;
$(“#county”).append(place_info);
}
}});
switch(city){
case ‘福州’:
$.set_counties(fuzhou_county);
break;
case ‘厦门’:
$.set_counties( xiamen_county);
break;
case ‘漳州’:
$.set_counties( zhangzhou_county);
break;
default :
alert(‘这里只写了福建的福州、漳州、厦门的部分城市信息’);
}
})
});
</script>
</head>
<body>
<div>
<ul>
<li>

<select name=”province” id=”province”>
<option value=”福建”>福建</option>
<option value=”广东”>广东</option>
<option value=”浙江”>浙江</option>
<option value=”江西”>江西</option>
</select>
</li>
<li>

<select name=”city” id=”city”>
<option value=”0″>未选择</option>
</select>
</li>
<li>
<select name=”county” id=”county”>
<option value=”0″>未选择</option>
</select>
</li>
</ul>
</div>
</body>
</html>

效果如下:

主要是做了这个功能,相关代码都有些备注,浅显易懂。如果你要使用可以直接继续添加省份、城市的数据,或者改改采用ajax获取数据,有不懂的代码可以留言或者联系我。

本人博客:基于Jquery实现省份、城市、区县三级联动

以下是一个基于HTML、JavaScript和Ajax的省份城市区县三级联动示例代码: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>省份城市区县三级联动示例</title> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> </head> <body> <label>省份:</label> <select id="province" onchange="getCity()"> <option value="">请选择省份</option> </select> <label>城市:</label> <select id="city" onchange="getDistrict()"> <option value="">请选择城市</option> </select> <label>区县:</label> <select id="district"> <option value="">请选择区县</option> </select> <script> $(document).ready(function () { $.ajax({ url: 'province.json', // 省份JSON文件地址 type: 'get', dataType: 'json', success: function (data) { for (var i = 0; i < data.length; i++) { $('#province').append('<option value="' + data[i].id + '">' + data[i].name + '</option>'); } } }); }); function getCity() { var provinceId = $('#province').val(); $('#city').empty(); $('#city').append('<option value="">请选择城市</option>'); $('#district').empty(); $('#district').append('<option value="">请选择区县</option>'); if (provinceId != '') { $.ajax({ url: 'city.json', // 城市JSON文件地址 type: 'get', dataType: 'json', data: {provinceId: provinceId}, success: function (data) { for (var i = 0; i < data.length; i++) { $('#city').append('<option value="' + data[i].id + '">' + data[i].name + '</option>'); } } }); } } function getDistrict() { var cityId = $('#city').val(); $('#district').empty(); $('#district').append('<option value="">请选择区县</option>'); if (cityId != '') { $.ajax({ url: 'district.json', // 区县JSON文件地址 type: 'get', dataType: 'json', data: {cityId: cityId}, success: function (data) { for (var i = 0; i < data.length; i++) { $('#district').append('<option value="' + data[i].id + '">' + data[i].name + '</option>'); } } }); } } </script> </body> </html> ``` 上述代码中,通过jQuery的Ajax方法从服务器获取省份城市区县的JSON数据,并利用JavaScript将其插入到HTML的select标签中。当用户选择省份时,通过onchange事件触发getCity()函数获取该省份城市列表,用户选择城市时,再通过onchange事件触发getDistrict()函数获取该城市区县列表。最终,用户选择的省份城市区县将通过select标签的value属性提交到服务器进行处理。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值