在建設(shè)企業(yè)網(wǎng)站或購物商城網(wǎng)站的時(shí)候，會(huì)需要用到省市區(qū)的地區(qū)選項(xiàng)卡，但我們又不可能自己重新去寫一個(gè)，雖然難度不大，但是工作量很大，所以一般都是直接使用插件就好了。
以下是我最近使用到的一個(gè)省市區(qū)級(jí)三級(jí)聯(lián)查。
1、Html代碼
2、Js代碼
3、Json代碼
Html代碼如下：
（樣式方面，根據(jù)項(xiàng)目的需要調(diào)用就好，這里的關(guān)鍵是id的值，需要和下面的js相對(duì)應(yīng)，不然沒法聯(lián)查）
 

 
<div class="top-item">
<div><span>*</span>地區(qū)：</div>
<div class="item-address">
<!-- 省級(jí) -->
<select class="register-allb-s" id="xdt" name="input_province" lay-verify="required">
</select>
<!-- 市級(jí) -->
<select class="register-allb-s" id="sdt" name="input_city" lay-verify="required">
</select>
<!-- 區(qū)縣級(jí) -->
<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">請(qǐng)選擇</option>');
x();//加載省級(jí)數(shù)據(jù)
$("#xdt").change(function () {
$("#sdt").empty();
$("#sdt").prepend('<option value="0">請(qǐng)選擇</option>');
var val = $("#xdt  option:selected").attr('exid');
s(val);
});//點(diǎn)擊省級(jí)加載市級(jí)數(shù)據(jù)
$("#sdt").change(function () {
$("#qdt").empty();
$("#qdt").prepend('<option value="0">請(qǐng)選擇</option>');
var index = $("#xdt  option:selected").attr('exid');
var val = $("#sdt  option:selected").attr('exid');
q(index, val);
});//點(diǎn)擊市級(jí)加載區(qū)縣級(jí)數(shù)據(jù)
});
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": [
"東城區(qū)",
"西城區(qū)",
"崇文區(qū)",
"宣武區(qū)",
"朝陽區(qū)",
"豐臺(tái)區(qū)",
"石景山區(qū)",
"海淀區(qū)",
"門頭溝區(qū)",
"房山區(qū)",
"通州區(qū)",
"順義區(qū)",
"昌平區(qū)",
"大興區(qū)",
"平谷區(qū)",
"懷柔區(qū)",
"密云縣",
"延慶縣"
]
}
]
}
]
 
Json文件直接引用即可，如有缺少或錯(cuò)誤，也可以執(zhí)行編輯