省市区级三级联动查询PHP网站实现

在建设企业网站或购物商城网站的时候，会需要用到省市区的地区选项卡，但我们又不可能自己重新去写一个，虽然难度不大，但是工作量很大，所以一般都是直接使用插件就好了。
以下是我最近使用到的一个省市区级三级联查。
1、Html代码
2、Js代码
3、Json代码
Html代码如下：
（样式方面，根据项目的需要调用就好，这里的关键是id的值，需要和下面的js相对应，不然没法联查）
 

 
<div class="top-item">
<div><span>*</span>地区：</div>
<div 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>
</div>
 
Js代码如下：
 

 
<script>
var 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>');
}
}
</script>
 
Json代码如下：
 

[
{
"name": "北京市",
"city": [
{
"name": "北京市",
"area": [
"东城区",
"西城区",
"崇文区",
"宣武区",
"朝阳区",
"丰台区",
"石景山区",
"海淀区",
"门头沟区",
"房山区",
"通州区",
"顺义区",
"昌平区",
"大兴区",
"平谷区",
"怀柔区",
"密云县",
"延庆县"
]
}
]
}
]
 
Json文件直接引用即可，如有缺少或错误，也可以执行编辑