省市区 三级联动效果

概述最近在尝试做一个地址选择的三级联动 话不多说，直接撸代码 HTML 1 <div class="ui-form-item mbank-front-border-left" id="locationDiv">2 <label style="text-align: left;">所在区域</label>3 <input class=" ui-a

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

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]; /* 默认选中的地区 */ 10  11 var checked = [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‘,selectedindex) {121   console.log(selectedVal);122   console.log(selectedindex);123 });124 125 nameEl.addEventListener(‘click‘,function () {126     picker.show();127 });128 </script>

总结

以上是内存溢出为你收集整理的省市区 三级联动效果全部内容，希望文章能够帮你解决省市区 三级联动效果所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。