省市区级三级联动查询PHP网站实现_成都网站搭建
在建设企业网站或购物商城网站的时候,会需要用到省市区的地区选项卡,但我们又不可能自己重新去写一个,虽然难度不大,但是工作量很大,所以一般都是直接使用插件就好了。以下是我最近使用到的一个省市区级三级联查。1、Html代码2、Js代码3、Json代码Html代码如下:(样式方面,根据项目的需要调用就好,这里的关键是id的值,需要和下面的js相对应,不然没法联查)
div class=top-itemdivspan*/span地区:/divdiv class=item-address!-- 省级 --select class=register-allb-s id=xdt name=input_province lay-verify=required/select!-- 市级 --select class=register-allb-s id=sdt name=input_city lay-verify=required/select!-- 区县级 --select class=register-allb-s id=qdt name=input_area lay-verify=required/select/div/divJs代码如下:
scriptvar Arry = [];$(function () {$(select).prepend(option value=0请选择/option);x();//加载省级数据$(#xdt).change(function () {$(#sdt).empty();$(#sdt).prepend(option value=0请选择/option);var val = $(#xdt option:selected).attr(exid);s(val);});//点击省级加载市级数据$(#sdt).change(function () {$(#qdt).empty();$(#qdt).prepend(option value=0请选择/option);var index = $(#xdt option:selected).attr(exid);var val = $(#sdt option:selected).attr(exid);q(index, val);});//点击市级加载区县级数据});function x() {$.ajax({url: /wjh/xsq.json,//Json文件的存放位置contentType: application/json; charset=utf-8,type: get,dataType: json,success: function (data) {Arry = data;for (var i = 0; i data.length; i++) {$(#xdt).prepend(option class=options value= + data[i].name + exid=+ i + + data[i].name + /option);}}});}function s(val) {var data = Arry;var arr = data[val].city;for (var i = 0; i arr.length; i++) {$(#sdt).append(option value= + arr[i].name + exid=+ i + + arr[i].name + /option);}}function q(idex, val) {var data = Arry;var arr = data[idex].city[val].area;for (var i = 0; i arr.length; i++) {$(#qdt).prepend(option value= + arr[i] + exid=+ i + + arr[i] + /option);}}/scriptJson代码如下:
[{name: 北京市,city: [{name: 北京市,area: [东城区,西城区,崇文区,宣武区,朝阳区,丰台区,石景山区,海淀区,门头沟区,房山区,通州区,顺义区,昌平区,大兴区,平谷区,怀柔区,密云县,延庆县]}]}]Json文件直接引用即可,如有缺少或错误,也可以执行编辑
省市区级三级联动查询PHP网站实现_成都网站搭建 https://www.cdnanqi.cn/wangzhanzhizuo/11027.html
- SEO的站内优化方法与注意事项(SEO的站内优化方法与注意事项有哪些)
- 分析网站数据对网站seo优化有哪些帮助可以让我们更全面了解网站做出优化调整-成都seo优化-成都网站优化
- 提高网站排名的有效指标是什么-西昌SEO优化
- 网站建设经验:如何设计一个吸引人的首页_成都做网站
- 分享关键词排名稳定首页步骤,确保网站自然流量源源不断-成都seo网站关键词优化
- 如何优化SEO关键词-射洪SEO优化
- 信息流推进管理,竞价信息流原则_成都竞价托管
- 分析SEO网站合理的目录结构及URL优化注意事项-成都seo优化-成都网站优化
- SEO优化知识体系设计(SEO云优化设计数学)
- 网站设计中的色彩搭配与用户评价的影响力_成都做网站