省市区三级联动jquery实现代码


Posted in Javascript onApril 15, 2020

最近项目需要用到关于省市区三级联动下拉选择的功能,于是乎网上搜了一些做法,觉得有一些只是给出了小的案例,却很难找到详细的省、市、区的具体数据(其实,用baidu搜索就是这样啦),果断用google,搜出来的博文质量相当高,特此记录记录!!!

对于这个效果,其实我发现主要在于两点:1、jquery的筛选遍历操作;2、存储省、市、区这些数据时候的格式。另外一点是如何将获取得到的数据放到select option中(即下拉框中!)

对于第一个问题的解决,其实熟悉Jquery的博友估计是不难的,主要涉及:find,eq,attr等函数的操作。下面是其中涉及到的一个案例:用于获取省的所有数据,并将其放到下拉框中:

function func_suc_getXmlProvice(xml) { 
 //jquery的查找功能 
 var sheng = $(xml).find("prov"); 
 
 //jquery的遍历与查询匹配 eq功能,并将其放到下拉框中 
 sheng.each(function(i) { 
 province.append("<option value=" + i + ">" 
 + sheng.eq(i).attr("text") + "</option>"); 
 }); 
 }

下面进入正题,建立一个动态web工程,然后将下面讲到的html、js文件、存放省市区xml文件 都放在Web-Contetn下即可。首先看一看前端html文件province_city_select.html:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>省市区三级联动</title> 
<script type="text/javascript" src="jquery-1.8.3.min.js"></script> 
<script type="text/javascript" src="province_city.js"></script> 
</head> 
<body> 
 <select id="province" name="province"> 
 </select> 
 <select id="city" name="city"> 
 </select> 
 <select id="area" name="area"> 
 </select> 
 <div> 
 地址是:<span id="pro_city"></span> <input id="txtProCity" type="text" /> 
 </div> 
</body> 
</html>

然后注意放进jquery-1.8.3.min.js,可以来我这里下来:jquery库文件。然后需要新建province_city.js,其源码如下:

$(function() { 
 
 var address = $("#pro_city"); 
 var province = $("#province"); 
 var city = $("#city"); 
 var area = $("#area"); 
 var preProvince = "<option value=\"\">选择省(市)</option>"; 
 var preCity = "<option value=\"\">选择市(区)</option>"; 
 var preArea = "<option value=\"\">选择区(县)</option>"; 
 
 //初始化 
 province.html(preProvince); 
 city.html(preCity); 
 area.html(preArea); 
 
 //文档加载完毕:即从province_city_select_Info.xml获取数据,成功之后采用 
 //func_suc_getXmlProvice进行 省的 解析 
 $.ajax({ 
 type : "GET", 
 url : "province_city_select_Info.xml", 
 success : func_suc_getXmlProvice 
 }); 
 
 //省 下拉选择发生变化触发的事件 
 province.change(function() { 
 //province.val() : 返回是每个省对应的下标,序号从0开始 
 if (province.val() != "") { 
  city.html(preCity); 
  
  //根据下拉得到的省对于的下标序号,动态从从province_city_select_Info.xml获取数据,成功之后采用 
  //func_suc_getXmlProvice进行省对应的市的解析 
  $.ajax({ 
  type : "GET", 
  url : "province_city_select_Info.xml", 
  success : func_suc_getXmlCity 
  }); 
  
 } 
 }); 
 
 //市 下拉选择发生变化触发的事件 
 city.change(function() { 
 area.html(preArea); 
 $.ajax({ 
  type : "GET", 
  url : "province_city_select_Info.xml", 
  
  //根据下拉得到的省、市对于的下标序号,动态从从province_city_select_Info.xml获取数据,成功之后采用 
  //func_suc_getXmlArea进行省对应的市对于的区的解析 
  success : func_suc_getXmlArea 
 }); 
 }); 
 
 //区 下拉选择发生变化触发的事件 
 area.change(function() { 
 var value = province.find("option:selected").text() 
  + city.find("option:selected").text() 
  + area.find("option:selected").text(); 
 address.text(value); 
 $("#txtProCity").val(value); 
 }); 
 
 //解析获取xml格式文件中的prov标签,得到所有的省,并逐个进行遍历 放进下拉框中 
 function func_suc_getXmlProvice(xml) { 
 //jquery的查找功能 
 var sheng = $(xml).find("prov"); 
  
 //jquery的遍历与查询匹配 eq功能,并将其放到下拉框中 
 sheng.each(function(i) { 
  province.append("<option value=" + i + ">" 
   + sheng.eq(i).attr("text") + "</option>"); 
 }); 
 } 
 
 function func_suc_getXmlCity(xml) { 
 var xml_sheng = $(xml).find("prov"); 
 var pro_num = parseInt(province.val()); 
 var xml_shi = xml_sheng.eq(pro_num).find("city"); 
 xml_shi.each(function(j) { 
  city.append("<option value=" + j + ">" 
   + xml_shi.eq(j).attr("text") + "</option>"); 
 }); 
 } 
 
 function func_suc_getXmlArea(xml) { 
 var xml_sheng = $(xml).find("prov"); 
 var pro_num = parseInt(province.val()); 
 var xml_shi = xml_sheng.eq(pro_num).find("city"); 
 var city_num = parseInt(city.val()); 
 var xml_xianqu = xml_shi.eq(city_num).find("county"); 
 xml_xianqu.each(function(k) { 
  area.append("<option value=" + k + ">" 
   + xml_xianqu.eq(k).attr("text") + "</option>"); 
 }); 
 } 
});

然后,重点来了,当然是province_city_select_Info.xml里面的内容啦,因为比较多,我只贴出一部分,如下所示,其余的可以到我这里来下载:省市区三级数据

<prov id="130000" text="河北省"> 
 <city id="130100" text="石家庄市"> 
  <county id="130102" text="长安区"></county> 
  <county id="130103" text="桥东区"></county> 
  <county id="130104" text="桥西区"></county> 
  <county id="130105" text="新华区"></county> 
  <county id="130107" text="井陉矿区"></county> 
  <county id="130108" text="裕华区"></county> 
  <county id="130121" text="井陉县"></county> 
  <county id="130123" text="正定县"></county> 
  <county id="130124" text="栾城县"></county> 
  <county id="130125" text="行唐县"></county> 
  <county id="130126" text="灵寿县"></county> 
  <county id="130127" text="高邑县"></county> 
  <county id="130128" text="深泽县"></county> 
  <county id="130129" text="赞皇县"></county> 
  <county id="130130" text="无极县"></county> 
  <county id="130131" text="平山县"></county> 
  <county id="130132" text="元氏县"></county> 
  <county id="130133" text="赵县"></county> 
  <county id="130181" text="辛集市"></county> 
  <county id="130182" text="藁城市"></county> 
  <county id="130183" text="晋州市"></county> 
  <county id="130184" text="新乐市"></county> 
  <county id="130185" text="鹿泉市"></county> 
 </city> 
 <city id="130200" text="唐山市"> 
  <county id="130202" text="路南区"></county> 
  <county id="130203" text="路北区"></county> 
  <county id="130204" text="古冶区"></county> 
  <county id="130205" text="开平区"></county> 
  <county id="130207" text="丰南区"></county> 
  <county id="130208" text="丰润区"></county> 
  <county id="130223" text="滦县"></county> 
  <county id="130224" text="滦南县"></county> 
  <county id="130225" text="乐亭县"></county> 
  <county id="130227" text="迁西县"></county> 
  <county id="130229" text="玉田县"></county> 
  <county id="130230" text="唐海县"></county> 
  <county id="130281" text="遵化市"></county> 
  <county id="130283" text="迁安市"></county> 
 </city> 
 <city id="130300" text="秦皇岛市"> 
  <county id="130302" text="海港区"></county> 
  <county id="130303" text="山海关区"></county> 
  <county id="130304" text="北戴河区"></county> 
  <county id="130321" text="青龙满族自治县"></county> 
  <county id="130322" text="昌黎县"></county> 
  <county id="130323" text="抚宁县"></county> 
  <county id="130324" text="卢龙县"></county> 
 </city> 
 <city id="130400" text="邯郸市"> 
  <county id="130402" text="邯山区"></county> 
  <county id="130403" text="丛台区"></county> 
  <county id="130404" text="复兴区"></county> 
  <county id="130406" text="峰峰矿区"></county> 
  <county id="130421" text="邯郸县"></county> 
  <county id="130423" text="临漳县"></county> 
  <county id="130424" text="成安县"></county> 
  <county id="130425" text="大名县"></county> 
  <county id="130426" text="涉县"></county> 
  <county id="130427" text="磁县"></county> 
  <county id="130428" text="肥乡县"></county> 
  <county id="130429" text="永年县"></county> 
  <county id="130430" text="邱县"></county> 
  <county id="130431" text="鸡泽县"></county> 
  <county id="130432" text="广平县"></county> 
  <county id="130433" text="馆陶县"></county> 
  <county id="130434" text="魏县"></county> 
  <county id="130435" text="曲周县"></county> 
  <county id="130481" text="武安市"></county> 
 </city> 
 <city id="130500" text="邢台市"> 
  <county id="130502" text="桥东区"></county> 
  <county id="130503" text="桥西区"></county> 
  <county id="130521" text="邢台县"></county> 
  <county id="130522" text="临城县"></county> 
  <county id="130523" text="内丘县"></county> 
  <county id="130524" text="柏乡县"></county> 
  <county id="130525" text="隆尧县"></county> 
  <county id="130526" text="任县"></county> 
  <county id="130527" text="南和县"></county> 
  <county id="130528" text="宁晋县"></county> 
  <county id="130529" text="巨鹿县"></county> 
  <county id="130530" text="新河县"></county> 
  <county id="130531" text="广宗县"></county> 
  <county id="130532" text="平乡县"></county> 
  <county id="130533" text="威县"></county> 
  <county id="130534" text="清河县"></county> 
  <county id="130535" text="临西县"></county> 
  <county id="130581" text="南宫市"></county> 
  <county id="130582" text="沙河市"></county> 
 </city> 
 <city id="130600" text="保定市"> 
  <county id="130602" text="新市区"></county> 
  <county id="130603" text="北市区"></county> 
  <county id="130604" text="南市区"></county> 
  <county id="130621" text="满城县"></county> 
  <county id="130622" text="清苑县"></county> 
  <county id="130623" text="涞水县"></county> 
  <county id="130624" text="阜平县"></county> 
  <county id="130625" text="徐水县"></county> 
  <county id="130626" text="定兴县"></county> 
  <county id="130627" text="唐县"></county> 
  <county id="130628" text="高阳县"></county> 
  <county id="130629" text="容城县"></county> 
  <county id="130630" text="涞源县"></county> 
  <county id="130631" text="望都县"></county> 
  <county id="130632" text="安新县"></county> 
  <county id="130633" text="易县"></county> 
  <county id="130634" text="曲阳县"></county> 
  <county id="130635" text="蠡县"></county> 
  <county id="130636" text="顺平县"></county> 
  <county id="130637" text="博野县"></county> 
  <county id="130638" text="雄县"></county> 
  <county id="130681" text="涿州市"></county> 
  <county id="130682" text="定州市"></county> 
  <county id="130683" text="安国市"></county> 
  <county id="130684" text="高碑店市"></county> 
 </city> 
 <city id="130700" text="张家口市"> 
  <county id="130702" text="桥东区"></county> 
  <county id="130703" text="桥西区"></county> 
  <county id="130705" text="宣化区"></county> 
  <county id="130706" text="下花园区"></county> 
  <county id="130721" text="宣化县"></county> 
  <county id="130722" text="张北县"></county> 
  <county id="130723" text="康保县"></county> 
  <county id="130724" text="沽源县"></county> 
  <county id="130725" text="尚义县"></county> 
  <county id="130726" text="蔚县"></county> 
  <county id="130727" text="阳原县"></county> 
  <county id="130728" text="怀安县"></county> 
  <county id="130729" text="万全县"></county> 
  <county id="130730" text="怀来县"></county> 
  <county id="130731" text="涿鹿县"></county> 
  <county id="130732" text="赤城县"></county> 
  <county id="130733" text="崇礼县"></county> 
 </city> 
 <city id="130800" text="承德市"> 
  <county id="130802" text="双桥区"></county> 
  <county id="130803" text="双滦区"></county> 
  <county id="130804" text="鹰手营子矿区"></county> 
  <county id="130821" text="承德县"></county> 
  <county id="130822" text="兴隆县"></county> 
  <county id="130823" text="平泉县"></county> 
  <county id="130824" text="滦平县"></county> 
  <county id="130825" text="隆化县"></county> 
  <county id="130826" text="丰宁满族自治县"></county> 
  <county id="130827" text="宽城满族自治县"></county> 
  <county id="130828" text="围场满族蒙古族自治县"></county> 
 </city> 
 <city id="130900" text="沧州市"> 
  <county id="130902" text="新华区"></county> 
  <county id="130903" text="运河区"></county> 
  <county id="130921" text="沧县"></county> 
  <county id="130922" text="青县"></county> 
  <county id="130923" text="东光县"></county> 
  <county id="130924" text="海兴县"></county> 
  <county id="130925" text="盐山县"></county> 
  <county id="130926" text="肃宁县"></county> 
  <county id="130927" text="南皮县"></county> 
  <county id="130928" text="吴桥县"></county> 
  <county id="130929" text="献县"></county> 
  <county id="130930" text="孟村回族自治县"></county> 
  <county id="130981" text="泊头市"></county> 
  <county id="130982" text="任丘市"></county> 
  <county id="130983" text="黄骅市"></county> 
  <county id="130984" text="河间市"></county> 
 </city> 
 <city id="131000" text="廊坊市"> 
  <county id="131002" text="安次区"></county> 
  <county id="131003" text="广阳区"></county> 
  <county id="131022" text="固安县"></county> 
  <county id="131023" text="永清县"></county> 
  <county id="131024" text="香河县"></county> 
  <county id="131025" text="大城县"></county> 
  <county id="131026" text="文安县"></county> 
  <county id="131028" text="大厂回族自治县"></county> 
  <county id="131081" text="霸州市"></county> 
  <county id="131082" text="三河市"></county> 
 </city> 
 <city id="131100" text="衡水市"> 
  <county id="131102" text="桃城区"></county> 
  <county id="131121" text="枣强县"></county> 
  <county id="131122" text="武邑县"></county> 
  <county id="131123" text="武强县"></county> 
  <county id="131124" text="饶阳县"></county> 
  <county id="131125" text="安平县"></county> 
  <county id="131126" text="故城县"></county> 
  <county id="131127" text="景县"></county> 
  <county id="131128" text="阜城县"></county> 
  <county id="131181" text="冀州市"></county> 
  <county id="131182" text="深州市"></county> 
 </city> 
 </prov>

好了,介绍一下效果:

刚开始的:

省市区三级联动jquery实现代码

下拉选择省的,然后出现市的,选择了市的,然后出现了区的,最后选择区的时候,得到地址:

省市区三级联动jquery实现代码

省市区三级联动jquery实现代码

省市区三级联动jquery实现代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用JavaScript检测Firefox浏览器是否启用了Firebug的代码
Dec 28 Javascript
angularJS 中$attrs方法使用指南
Feb 09 Javascript
js改变Iframe中Src的方法
May 05 Javascript
javascript数组克隆简单实现方法
Dec 16 Javascript
果断收藏9个Javascript代码高亮脚本
Jan 06 Javascript
使用js获取地址栏参数的方法推荐(超级简单)
Jun 14 Javascript
使用Curl命令查看请求响应时间方法
Nov 04 Javascript
javascript表单正则应用
Feb 04 Javascript
JavaScript设计模式之享元模式实例详解
Jan 17 Javascript
vue-cli随机生成port源码的方法
Sep 02 Javascript
基于vue-cli3创建libs库的实现方法
Dec 04 Javascript
将Vue组件库更换为按需加载的方法步骤
May 06 Javascript
微信小程序 数据访问实例详解
Oct 08 #Javascript
Bootstrap Table的使用总结
Oct 08 #Javascript
js HTML5手机刮刮乐代码
Sep 29 #Javascript
原生js的RSA和AES加密解密算法
Oct 08 #Javascript
ReactNative-JS 调用原生方法实例代码
Oct 08 #Javascript
微信小程序 实战小程序实例
Oct 08 #Javascript
node.js实现博客小爬虫的实例代码
Oct 08 #Javascript
You might like
世界咖啡生产者论坛呼吁:需要立即就咖啡价格采取认真行动
2021/03/06 咖啡文化
php字符串截取问题
2006/11/28 PHP
PHP 日期时间函数的高级应用技巧
2009/10/10 PHP
关于UEditor编辑器远程图片上传失败的解决办法
2012/08/31 PHP
关于php支持分块与断点续传文件下载功能代码
2014/05/09 PHP
解密ThinkPHP3.1.2版本之模板继承
2014/06/19 PHP
php微信公众平台开发类实例
2015/04/01 PHP
laravel 5.5 关闭token的3种实现方式
2019/10/24 PHP
Javascript学习笔记7 原型链的原理
2010/01/11 Javascript
原生js拖拽(第一课 未兼容)拖拽思路
2013/03/29 Javascript
javascript中的toFixed固定小数位数 简单实例分享
2013/07/12 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
2014/05/12 Javascript
微信小程序 教程之数据绑定
2016/10/18 Javascript
Vue.js父与子组件之间传参示例
2017/02/28 Javascript
ES6解构赋值实例详解
2017/10/31 Javascript
在vue-cli的组件模板里使用font-awesome的两种方法
2018/09/28 Javascript
Python中json格式数据的编码与解码方法详解
2016/07/01 Python
python的变量与赋值详细分析
2017/11/08 Python
python3调用windows dos命令的例子
2019/08/14 Python
python基于property()函数定义属性
2020/01/22 Python
大数据分析用java还是Python
2020/07/06 Python
常用的10个Python实用小技巧
2020/08/10 Python
python 代码运行时间获取方式详解
2020/09/18 Python
俄罗斯品牌服装在线商店:VIPAVENUE
2020/08/10 全球购物
您熟悉ORM(Object-Relation Mapping)吗?请谈谈您所理解的ORM
2016/02/08 面试题
什么是静态路由,其特点是什么?什么是动态路由,其特点是什么?
2013/07/26 面试题
外贸采购员求职的自我评价
2013/11/26 职场文书
会计的岗位职责
2014/03/15 职场文书
群众路线教育党课主持词
2014/04/01 职场文书
个人安全承诺书
2014/05/22 职场文书
学校节能减排方案
2014/06/13 职场文书
实验室标语
2014/06/21 职场文书
2014年办公室主任工作总结
2014/11/12 职场文书
给女朋友道歉的话大全
2015/01/20 职场文书
JS 4个超级实用的小技巧 提升开发效率
2021/10/05 Javascript
教你修复 Win11应用商店加载空白问题
2021/12/06 数码科技