服务热线 400-660-8066
天津网站建设
在建设企业网站或购物商城网站的时候，会需要用到省市区的地区选项卡，但我们又不可能自己重新去写一个，虽然难度不大，但是工作量很大，所以一般都是直接使用插件就好了。
以下是我最近使用到的一个省市区级联查。
1、Html代码
2、Js代码
3、Json代码
Html代码如下：
（样式方面，根据项目的需要调用就好，这里的关键是id的值，需要和下面的js相对应，不然没法联查）
pclass=top-item
pspan*/span地区：/p
pclass=item-address
！--省级--
selectclass=register-allb-sid=xdtname=input_provincelay-verify=required
/select
！--市级--
selectclass=register-allb-sid=sdtname=input_citylay-verify=required
/select
！--区县级--
selectclass=register-allb-sid=qdtname=input_arealay-verify=required
/select
/p
/p
Js代码如下：
script
varArry=[];
$(function(){
$(select).prepend('optionvalue=0请选择/option');
x();//加载省级数据
$(#xdt).change(function(){
$(#sdt).empty();
$(#sdt).prepend('optionvalue=0请选择/option');
varval=$(#xdtoption：selected).attr('exid');
s(val);
});//点击省级加载市级数据
$(#sdt).change(function(){
$(#qdt).empty();
$(#qdt).prepend('optionvalue=0请选择/option');
varindex=$(#xdtoption：selected).attr('exid');
varval=$(#sdtoption：selected).attr('exid');
q(index，val);
});//点击市级加载区县级数据
});
functionx(){
$.ajax({
url：/wjh/xsq.json，//Json文件的存放位置
contentType：application/json;charset=utf-8，
type：get，
dataType：json，
success：function(data){
Arry=data;
for(vari=0;idata.length;i++){
$(#xdt).prepend('optionclass=optionsvalue='+data[i].name+'exid='+i+''+data[i].name+'/option');
}
}
});
}
functions(val){
vardata=Arry;
vararr=data[val].city;
for(vari=0;iarr.length;i++){
$(#sdt).append('optionvalue='+arr[i].name+'exid='+i+''+arr[i].name+'/option');
}
}
functionq(idex，val){
vardata=Arry;
vararr=data[idex].city[val].area;
for(vari=0;iarr.length;i++){
$(#qdt).prepend('optionvalue='+arr[i]+'exid='+i+''+arr[i]+'/option');
}
}
/script
Json代码如下：
[
{
name：北京市，
city：[
{
name：北京市，
area：[
东城区，
西城区，
崇文区，
宣武区，
朝阳区，
丰台区，
石景山区，
海淀区，
门头沟区，
房山区，
通州区，
顺义区，
昌平区，
大兴区，
平谷区，
怀柔区，
密云县，
延庆县
]
}
]
}
]
Json文件直接引用即可，如有缺少或错误，也可以执行编辑
添加动力小姐姐微信
电话咨询
400-660-8066
