省市级联动-全国

1.数据在国家统计局获取，下面是链接
http://www.stats.gov.cn/tjsj/tjbz/xzqhdm/201608/t20160809_1386477.html

2.如果可以的话，把代码改模块，方便以后使用。
宽度自适应，不用担心省市的名字太长
下载百度：http://pan.baidu.com/s/1mh8caRe

index.wxml

<view>
地址：
</view>
<view class="ssjl">
<picker range="{{provinces}}" style="width:{{provinceWidth}};" range-key="name" value='1' data-value="province" bindchange="change" >
    <input placeholder="请选择省" value="{{province.name}}"/>
</picker>
<picker range="{{citys}}" style="width:{{cityWidth}};"  range-key="name" value='1' data-value="city" bindchange="change" >
  <input placeholder="请选择市" value="{{city.name}}"/>
</picker>
<picker range="{{areas}}" style="width:{{areaWidth}};" range-key="name" value='1' data-value="area" bindchange="change" >
 <input  placeholder="请选择区" value="{{area.name}}"/>
</picker>
</view>
<view class="other">
<input type="text" placeholder="详细地址，比如xx县xx街道xx楼xx号" maxlength="50"/> 
</view>
<view>
{{province.name}}-{{city.name}}-{{area.name}}
</view>

index.js

//index.js
var json = require('../../utils/address.js');
Page({
  data:{
    provinces:json.getProvinces(),
    citys:[],
    areas:[],
    areaWidth:'100px',
    cityWidth:'100px',
    provinceWidth:'100px',
  },

  //获取对应的城市
  getCitysByCode:function(code){
    var pro=code.substr(0,2);//获取省代码，截取前两位 340000->34
    var citysArray=json.getCitys();//获取所有市
    var citysArr=[];
    for(var index in citysArray){  //遍历找到该省下面的所有市
      if(citysArray[index].code.substr(0,2)==pro){
          citysArr.push(citysArray[index])
      }
    }
    this.setData({
        citys:citysArr
    })
  },

  //获取对应的县区
  getAreasByCode:function(code){
     var are=code.substr(0,4);//获取县区代码，获取截取前四位 340288->3402 
     var areasArray=json.getAreas();//获取所有县区
     var areasArr=[];
    for(var index in areasArray){ //遍历找到该市下面的所有县区
      if(areasArray[index].code.substr(0,4)==are){
          areasArr.push(areasArray[index])
      }
    }
    this.setData({
        areas:areasArr
    })
  },

  //统一方法bindchange
  change:function(e){
    var category=e.currentTarget.dataset.value;//获取方法带的参数
    var index=e.detail.value;//获取下标
    if(category=='province'){
      var province=this.data.provinces[index];
      this.setData({
        province:province,
        provinceWidth:parseInt(province.name.length)+"em",
        citys:[],
        city:'',
        areas:[],
        area:''
      })
     this.getCitysByCode(province.code)
    }else if(category=='city'){
      var city=this.data.citys[index];
      this.setData({
        city:city,
        cityWidth:parseInt(city.name.length)+"em",
        areas:[],
        area:''
      }),
      this.getAreasByCode(city.code);//给县区赋值

    }else if(category=='area'){
       var area=this.data.areas[index];//获取该县区
       this.setData({
        area:area,
        areaWidth:parseInt(area.name.length)+"em",
      })
    }
  },



})

index.wxss

page{
    font-size: 13px;
    font-family: "宋体";

    width: 100%;
}
picker,view{

}
input{
    text-align: center;
}
.ssjl{
    /*border: 1px solid #dfdfdf;*/
    display: flex;
    flex-direction: row;
    width: 100%;
    text-align: center;
}
.other{
   border: 1px solid #dfdfdf;
   margin: 4px;
   border-radius: 4px;
}

.ssjl picker{
    margin: 4px;
    border: 1px solid #dfdfdf;
    border-radius: 4px;
    display: flex;
    flex: 1 1 auto;
    flex-direction: row;
    /*width: 100%;*/
    height: 20px;
    padding: 2px;
}
.picker{
    flex: 1 1 auto;
    display: block;
    /*width: 100%;*/
    height: 100%;
}

.picker::after{
    flex-grow:2
}

../utils/address.js

function getProvinces(){
    return [{"name":"安徽省", "code":"340000"},{"name":"北京市", "code":"110000"},{"name":"福建省", "code":"350000"},{"name":"甘肃省", "code":"620000"},{"name":"广东省", "code":"440000"},{"name":"广西壮族自治区", "code":"450000"},{"name":"贵州省", "code":"520000"},{"name":"海南省", "code":"460000"},{"name":"河北省", "code":"130000"},{"name":"河南省", "code":"410000"},{"name":"黑龙江省", "code":"230000"},{"name":"湖北省", "code":"420000"},{"name":"湖南省", "code":"430000"},{"name":"吉林省", "code":"220000"},{"name":"江苏省", "code":"320000"},{"name":"江西省", "code":"360000"},{"name":"辽宁省", "code":"210000"},{"name":"内蒙古自治区", "code":"150000"},{"name":"宁夏回族自治区", "code":"640000"},{"name":"青海省", "code":"630000"},{"name":"山东省", "code":"370000"},{"name":"山西省", "code":"140000"},{"name":"陕西省", "code":"610000"},{"name":"上海市", "code":"310000"},{"name":"四川省", "code":"510000"},{"name":"天津市", "code":"120000"},{"name":"西藏自治区", "code":"540000"},{"name":"新疆维吾尔自治区", "code":"650000"},{"name":"云南省", "code":"530000"},{"name":"浙江省", "code":"330000"},{"name":"重庆市", "code":"500000"}]
}
function getCitys(){//代码太多就不贴，到文件下载}

function getAreas(){//代码太多就不贴，到文件下载
}

module.exports = {
  getProvinces: getProvinces,
  getCitys:getCitys,
  getAreas:getAreas
}