在建设企业网站或购物商城网站的时候，会需要用到省市区的地区选项卡，但我们又不可能自己重新去写一个，虽然难度不大，但是工作量很大，所以一般都是直接使用插件就好了。以下是我最近使用到的一个省市区级三级联查。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