位置: 编程技术 - 正文
推荐整理分享省市区三级联动jquery实现代码(省市区三级联动下拉表单),希望有所帮助,仅作参考,欢迎阅读内容。
文章相关热门搜索词:省市区三级联动的实现,省市区三级联动开展座谈会,省市区三级联动开展座谈会,省市区三级联动数据库,省市区三级联动数据库,省市区三级联动数据库,省市区三级联动思路,省市区三级联动的实现,内容如对您有帮助,希望把文章链接给更多的朋友!
最近项目需要用到关于省市区三级联动下拉选择的功能,于是乎网上搜了一些做法,觉得有一些只是给出了小的案例,却很难找到详细的省、市、区的具体数据(其实,用baidu搜索就是这样啦),果断用google,搜出来的博文质量相当高,特此记录记录!!!
对于这个效果,其实我发现主要在于两点:1、jquery的筛选遍历操作;2、存储省、市、区这些数据时候的格式。另外一点是如何将获取得到的数据放到select option中(即下拉框中!)
对于第一个问题的解决,其实熟悉Jquery的博友估计是不难的,主要涉及:find,eq,attr等函数的操作。下面是其中涉及到的一个案例:用于获取省的所有数据,并将其放到下拉框中:
下面进入正题,建立一个动态web工程,然后将下面讲到的html、js文件、存放省市区xml文件 都放在Web-Contetn下即可。首先看一看前端html文件province_city_select.html:
然后注意放进jquery-1.8.3.min.js,可以来我这里下来:jquery库文件。然后需要新建province_city.js,其源码如下:
然后,重点来了,当然是province_city_select_Info.xml里面的内容啦,因为比较多,我只贴出一部分,如下所示,其余的可以到我这里来下载:省市区三级数据
好了,介绍一下效果:
刚开始的:
下拉选择省的,然后出现市的,选择了市的,然后出现了区的,最后选择区的时候,得到地址:
标签: 省市区三级联动下拉表单
本文链接地址:https://www.jiuchutong.com/biancheng/380751.html 转载请保留说明!友情链接: 武汉网站建设