省市区 三级联动效果

最近在尝试做一个地址选择的三级联动 话不多说，直接撸代码

HTML

1 <div class="ui-form-item mbank-front-border-left" id="locationDiv">
2             <label style="text-align: left;">所在区域</label>
3             <input  class=" ui-account-field" id="selectLocation" value="请选择" readonly>
4             <i class="ui-icon-select"></i>
5             <input id="locationVal" type="hidden" value="0">
6 </div>

JS：

  1 <script>
  2 var nameEl = document.getElementById('locationDiv');//大选择框
  3 var inputEl = document.getElementById('selectLocation');//input输入框
  4 
  5 var first = []; /* 省，直辖市 */
  6 var second = []; /* 市 */
  7 var third = []; /* 镇 */
  8 
  9 var selectedIndex = [0, 0, 0]; /* 默认选中的地区 */
 10 
 11 var checked = [0, 0, 0]; /* 已选选项 */
 12 
 13 function creatList(obj, list){
 14   obj.forEach(function(item, index, arr){
 15   var temp = new Object();
 16   temp.text = item.name;
 17   temp.city_code = item.code;
 18   temp.value = index;
 19   list.push(temp);
 20   })
 21 }
 22 
 23 creatList(city, first);
 24 
 25 if (city[selectedIndex[0]].hasOwnProperty('sub')) {
 26   creatList(city[selectedIndex[0]].sub, second);
 27 } else {
 28   second = [{text: '', value: 0}];
 29 }
 30 
 31 if (city[selectedIndex[0]].sub[selectedIndex[1]].hasOwnProperty('sub')) {
 32   creatList(city[selectedIndex[0]].sub[selectedIndex[1]].sub, third);
 33 } else {
 34   third = [{text: '', value: 0}];
 35 }
 36 
 37 var picker = new Picker({
 38     data: [first, second, third],
 39   selectedIndex: selectedIndex,
 40     title: '地址选择'
 41 });
 42 
 43 picker.on('picker.select', function (selectedVal, selectedIndex) {
 44   var text1 = first[selectedIndex[0]].text;
 45   var text2 = second[selectedIndex[1]].text;
 46   var text3 = third[selectedIndex[2]] ? third[selectedIndex[2]].text : '';
 47 //console.log(third[selectedIndex[2]].city_code);
 48 //console.log(second[selectedIndex[1]].city_code);
 49 //
 50   var province_code = first[selectedIndex[0]].city_code;
 51   var city_code = second[selectedIndex[1]].city_code;
 52   var district_code = third[selectedIndex[2]].city_code;
 53       App.provinceCode = province_code;
 54     App.provinceName = text1;
 55     App.cityCode = city_code;
 56     App.cityName = text2;
 57     App.districtCode = district_code;
 58     App.districtName = text3;
 59     var str = text1 + ' ' + text2 + ' ' + text3;
 60     if (str.length>14) {
 61         str = str.substr(0,14)+"...";
 62     } 
 63     inputEl.value = str;
 64 });
 65 
 66 picker.on('picker.change', function (index, selectedIndex) {
 67   if (index === 0){
 68     firstChange();
 69   } else if (index === 1) {
 70     secondChange();
 71   }
 72 
 73   function firstChange() {
 74     second = [];
 75     third = [];
 76     checked[0] = selectedIndex;
 77     var firstCity = city[selectedIndex];
 78     if (firstCity.hasOwnProperty('sub')) {
 79       creatList(firstCity.sub, second);
 80 
 81       var secondCity = city[selectedIndex].sub[0]
 82       if (secondCity.hasOwnProperty('sub')) {
 83         creatList(secondCity.sub, third);
 84       } else {
 85         third = [{text: '', value: 0}];
 86         checked[2] = 0;
 87       }
 88     } else {
 89       second = [{text: '', value: 0}];
 90       third = [{text: '', value: 0}];
 91       checked[1] = 0;
 92       checked[2] = 0;
 93     }
 94 
 95     picker.refillColumn(1, second);
 96     picker.refillColumn(2, third);
 97     picker.scrollColumn(1, 0)
 98     picker.scrollColumn(2, 0)
 99   }
100 
101   function secondChange() {
102     third = [];
103     checked[1] = selectedIndex;
104     var first_index = checked[0];
105     if (city[first_index].sub[selectedIndex].hasOwnProperty('sub')) {
106       var secondCity = city[first_index].sub[selectedIndex];
107       creatList(secondCity.sub, third);
108       picker.refillColumn(2, third);
109       picker.scrollColumn(2, 0)
110     } else {
111       third = [{text: '', value: 0}];
112       checked[2] = 0;
113       picker.refillColumn(2, third);
114       picker.scrollColumn(2, 0)
115     }
116   }
117 
118 });
119 
120 picker.on('picker.valuechange', function (selectedVal, selectedIndex) {
121   console.log(selectedVal);
122   console.log(selectedIndex);
123 });
124 
125 nameEl.addEventListener('click', function () {
126     picker.show();
127 });
128 </script>