Jquery省市区三级联动

具体代码如下所示,效果图如下所示,通过选择的城市动态加载县区列表,省市县三者都是动态联动的

功能图如下所示:

像平时购物挑选地方时同样,通过甄选的省动态加载城市列表,通过选拔的都市动态加载县区列表,进而得以兑现省市县的三级联合浮动,下边选取原生的JavaScript来促成那么些职能:

图片 1

先给大家来得下测量试验结果:

废话非常少说了,直接给我们贴代码了,具体代码如下所示:

未做别的取舍时:

<script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <!--读取数据库,以json的格式输出,然后复制json数据,创建js文件--> 
<script src="json/CityJson.js" type="text/javascript"></script>
<script src="json/ProJson.js" type="text/javascript"></script>
<script src="json/DistrictJson.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$.each(province, function (k, p) { 
var option = "<option value='" + p.ProID + "'>" + p.ProName + "</option>";
$("#selProvince").append(option);
});
$("#selProvince").change(function () {
var selValue = $(this).val(); 
$("#selCity option:gt(0)").remove();
$.each(city, function (k, p) { 
if (p.ProID == selValue) {
var option = "<option value='" + p.CityID + "'>" + p.CityName + "</option>";
$("#selCity").append(option);
}
});
});
$("#selCity").change(function () {
var selValue = $(this).val();
$("#selDistrict option:gt(0)").remove(); 
$.each(District, function (k, p) {
if (p.CityID == selValue) {
var option = "<option value='" + p.Id + "'>" + p.DisName + "</option>";
$("#selDistrict").append(option);
}
}); 
}); 
});
</script>
</head>
<body>
<select id="selProvince">
<option value="0">--请选择省份--</option>
</select>
<select id="selCity">
<option value="0">--请选择城市--</option>
<option>aaaa</option>
<option>aaaa</option>
</select>
<select id="selDistrict">
<option value="0">--请选择区/县--</option>
</select>
<input type="button" id="btnOK" value="确定" />
</body>
</html>

图片 2

本段代码比较简单,实用性也足够高,希望本文所述对我们全部协助。

选择时:

您大概感兴趣的小说:

  • vue.js模仿京东省市区三级联合浮动的挑选组件实例代码
  • js
    完成省市区三级联合浮动菜单功效
  • JavaScript省市区三级联合浮动菜单功用
  • javascript省市区三级联合浮动下拉框菜单实例演示
  • javascript贯彻省市区三级联合浮动下拉框菜单
  • 省市区三级联合浮动下拉框菜单javascript版
  • javascript贯彻轻松的省市区三级联合浮动
  • PHP+Mysql+Ajax+JS达成省市区三级联合浮动
  • 从QQ网址中提取的纯JS省市区三级联合浮动菜单
  • js达成三个省市区三级联合浮动选拔框代码分享
  • 原生js完成省市区三级联合浮动代码共享

图片 3

代码如下所示:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>三级联动测试</title>
<script src="jquery-2.1.4.min.js"></script>
<script type="text/javascript">
//用来获得option元素中selected属性为true的元素的id
function Get_Selected_Id(place){
var pro = document.getElementById(place);
var Selected_Id = pro.options[pro.selectedIndex].id;
return Selected_Id; //返回selected属性为true的元素的id
}
//改变下一个级联的option元素的内容,即加载市或县
function Get_Next_Place(This_Place_ID,Action){
var Selected_Id = Get_Selected_Id(This_Place_ID); //Selected_Id用来记录当前被选中的省或市的ID
if(Action=='Get_city') //从而可以在下一个级联中加载相应的市或县
Add_city(Selected_Id);
else if(Action=='Get_country')
Add_country(Selected_Id);
}
//用来存储省市区的数据结构
var Place_dict = {
"GuangDong":{
"GuangZhou":["PanYu","HuangPu","TianHe"],
"QingYuan":["QingCheng","YingDe","LianShan"],
"FoShan":["NanHai","ShunDe","SanShui"]
},
"ShanDong":{
"JiNan":["LiXia","ShiZhong","TianQiao"],
"QingDao":["ShiNan","HuangDao","JiaoZhou"]
},
"HuNan":{
"ChangSha":["KaiFu","YuHua","WangCheng"],
"ChenZhou":["BeiHu","SuXian","YongXian"]
}
};
//加载城市选项
function Add_city(Province_Selected_Id){
$("#city").empty();
$("#city").append("<option>City</option>");
$("#country").empty();
$("#country").append("<option>Country</option>");
//上面的两次清空与两次添加是为了保持级联的一致性
var province_dict = Place_dict[Province_Selected_Id]; //获得一个省的字典
for(city in province_dict){ //取得省的字典中的城市
//添加内容的同时在option标签中添加对应的城市ID
var text = "<option"+" id='"+city+"'>"+city+"</option>";
$("#city").append(text);
console.log(text); //用来观察生成的text数据
}
}
//加载县区选项
function Add_country(City_Selected_Id){
$("#country").empty();
$("#country").append("<option>Country</option>");
//上面的清空与添加是为了保持级联的一致性
var Province_Selected_ID = Get_Selected_Id("province"); //获得被选中省的ID,从而方便在字典中加载数据
var country_list = Place_dict[Province_Selected_ID][City_Selected_Id]; //获得城市列表
for(index in country_list){
////添加内容的同时在option标签中添加对应的县区ID
var text = "<option"+" id=\'"+country_list[index]+"\'>"+country_list[index]+"</option>";
$("#country").append(text);
console.log(text); //用来观察生成的text数据
}
}
</script>
</head>
<body>
<p>您的收货地址:</p>
<select id="province" onchange="Get_Next_Place('province','Get_city')">
<option id="Not_data1">Province</option>
<option id="GuangDong" value="GuangDong">GuangDong</option>
<option id="ShanDong" value="ShanDong">ShanDong</option>
<option id="HuNan" value="HuNan">HuNan</option>
</select>
<select id="city" onchange="Get_Next_Place('city','Get_country')">
<option id="Not_data2">City</option>
</select>
<select id="country">
<option id="Not_data3">Country</option>
</select>
<br/>
</body>
</html>

自然,省市县三者都以动态联合浮动的,只要拔尖的内容发生转移,全体子级的剧情也会产生更换或被重新恢复设置为City或Country.

上述所述是小编给大家享受的原生JavaScript完毕动态省市县三级联合浮动下拉框菜单实例代码,希望对大家享有支持。

你大概感兴趣的稿子:

  • JS完结非凡的中夏族民共和国地区三级联合浮动下拉菜单成效实例【测量试验可用】
  • javascript达成日期三级联合浮动下拉框选拔菜单
  • js
    完结省市区三级联合浮动菜单功效
  • JS封装的三级联合浮动菜单(使用时只必要一行js代码)
  • JavaScript省市区三级联动菜单效能
  • javascript省市区三级联合浮动下拉框菜单实例演示
  • javascript落到实处省市区三级联合浮动下拉框菜单
  • 省市区三级联合浮动下拉框菜单javascript版
  • 从QQ网址中提取的纯JS省市区三级联合浮动菜单
  • JavaScript贯彻三级联合浮动菜单实例代码