省市区级三级联动查询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://cdnanqi.cn/wangzhanzhizuo/11027.html
- 搜索引擎优化离不开关键词的研究和布局-成都seo网站关键词优化
- 网站怎么优化关键词 优化关键字需要注意的问题 | 雅安网络公司
- 服装SEO优化推广代运营(SEO优化推广有哪些方法技巧)
- 教育培训类网站的功能分析(三)_成都网站搭建
- 网站内部优化 网站内部代码如何做优化 | 达州网络公司
- 通过seo优化获得好的品牌效应才是网站优化的关键点-广汉SEO优化
- 新站整站SEO优化系统(新站优化效果好的超快排)
- 蓝色logo的网站设计配色如何让网站更加简洁大方_达州做网站
- 腾讯微信中国信通院:《2019-2020微信就业影响力-微信朋友圈广告附近推
- 优化网站SEO策略推广(优化网站SEO策略推广的方法)