在建設企業網站或購物商城網站的時候，會需要用到省市區的地區選項卡，但我們又不可能自己重新去寫一個，雖然難度不大，但是工作量很大，所以一般都是直接使用插件就好了。
以下是我最近使用到的一個省市區級三級聯查。
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文件直接引用即可，如有缺少或錯誤，也可以執行編輯