一、目录结构
二、功能演示
1)用浏览器打开，index.html
2)单击，输入框，
3)选择省份
4).选择城市
5).选择区县
6).显示已选中的名称和ID
三、前端页面html>
地区数据
$(function(){
//加载省市区控件
$("#city").click(function(e){
SelCity(this,e);
});
//定时器获取已选中数据
vartimeout=setInterval(function(){
var$cityId=$("#city").attr('data-id');
var$cityName=$("#city").attr('data-name');
$cityId=$cityId.split("-");
$cityName=$cityName.split("-");
if($cityId!=null&&$cityName!=null&&$cityId.length>0&&$cityId.length==$cityName.length){
$("#districtName").html('');
$("#districtCode").html('');
varsize=$cityId.length;
for(varindex=0;index
if(index==0){
$("#provinceName").html($cityName[index]);
$("#provinceCode").html($cityId[index]);
}elseif(index==1){
$("#cityName").html($cityName[index]);
$("#cityCode").html($cityId[index]);
}elseif(index==2){
$("#districtName").html($cityName[index]);
$("#districtCode").html($cityId[index]);
}
}
}
},1000);
});
所在地区
北京市-朝阳区
省份名称：省份ID：
城市名称：城市ID：
区县名称：区县ID：
地区数据varprovince=[{"city":[{"name":"东城区","id":110101},{"name":"西城区","id":110102}.....];
vararea=[{"name":"长安区","pid":130100,"id":130102},{"name":"桥西区","pid":130100,"id":130104}.....];
吐槽一下：百度搜省市区联动插件，各种坑爹。什么3个select 框， 3个ajax 查询，又麻烦又不好看又不好用。后来忍不了，优改了一下人家的控件，再去官网下载最新的地区数据。
谢谢大家观看~
