首页>>表单>>jQuery移动端三级地区联动(2022-05-11)

jQuery移动端三级地区联动

地址库在js文件里面

jQuery移动端三级地区联动
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

JavaScript Code
  1. <script>  
  2.             $(function() {  
  3.                 /** 
  4.                  * 通过数组id获取地址列表数组 
  5.                  * 
  6.                  * @param {Number} id 
  7.                  * @return {Array}  
  8.                  */   
  9.                 function getAddrsArrayById(id) {  
  10.                     var results = [];  
  11.                     if (addr_arr[id] != undefined)  
  12.                         addr_arr[id].forEach(function(subArr) {  
  13.                             results.push({  
  14.                                 key: subArr[0],  
  15.                                 val: subArr[1]  
  16.                             });  
  17.                         });  
  18.                     else {  
  19.                         return;  
  20.                     }  
  21.                     return results;  
  22.                 }  
  23.                 /** 
  24.                  * 通过开始的key获取开始时应该选中开始数组中哪个元素 
  25.                  * 
  26.                  * @param {Array} StartArr 
  27.                  * @param {Number|String} key 
  28.                  * @return {Number}  
  29.                  */           
  30.                 function getStartIndexByKeyFromStartArr(startArr, key) {  
  31.                     var result = 0;  
  32.                     if (startArr != undefined)  
  33.                         startArr.forEach(function(obj, index) {  
  34.                             if (obj.key == key) {  
  35.                                 result = index;  
  36.                                 return false;  
  37.                             }  
  38.                         });  
  39.                     return result;  
  40.                 }  
  41.   
  42.                 //bind the click event for 'input' element  
  43.                 $("#myAddrs").click(function() {  
  44.                     var PROVINCES = [],  
  45.                         startCities = [],  
  46.                         startDists = [];  
  47.                     //Province data，shall never change.  
  48.                     addr_arr[0].forEach(function(prov) {  
  49.                         PROVINCES.push({  
  50.                             key: prov[0],  
  51.                             val: prov[1]  
  52.                         });  
  53.                     });  
  54.                     //init other data.  
  55.                     var $input = $(this),  
  56.                         dataKey = $input.attr("data-key"),  
  57.                         provKey = 1, //default province 北京  
  58.                         cityKey = 36, //default city 北京  
  59.                         distKey = 37, //default district 北京东城区  
  60.                         distStartIndex = 0, //default 0  
  61.                         cityStartIndex = 0, //default 0  
  62.                         provStartIndex = 0; //default 0  
  63.   
  64.                     if (dataKey != "" && dataKey != undefined) {  
  65.                         var sArr = dataKey.split("-");  
  66.                         if (sArr.length == 3) {  
  67.                             provKey = sArr[0];  
  68.                             cityKey = sArr[1];  
  69.                             distKey = sArr[2];  
  70.   
  71.                         } else if (sArr.length == 2) { //such as 台湾，香港 and the like.  
  72.                             provKey = sArr[0];  
  73.                             cityKey = sArr[1];  
  74.                         }  
  75.                         startCities = getAddrsArrayById(provKey);  
  76.                         startDists = getAddrsArrayById(cityKey);  
  77.                         provStartIndex = getStartIndexByKeyFromStartArr(PROVINCES, provKey);  
  78.                         cityStartIndex = getStartIndexByKeyFromStartArr(startCities, cityKey);  
  79.                         distStartIndex = getStartIndexByKeyFromStartArr(startDists, distKey);  
  80.                     }  
  81.                     var navArr = [{//3 scrollers, and the title and id will be as follows:  
  82.                         title: "省",  
  83.                         id: "scs_items_prov"  
  84.                     }, {  
  85.                         title: "市",  
  86.                         id: "scs_items_city"  
  87.                     }, {  
  88.                         title: "区",  
  89.                         id: "scs_items_dist"  
  90.                     }];  
  91.                     SCS.init({  
  92.                         navArr: navArr,  
  93.                         onOk: function(selectedKey, selectedValue) {  
  94.                             $input.val(selectedValue).attr("data-key", selectedKey);  
  95.                         }  
  96.                     });  
  97.                     var distScroller = new SCS.scrollCascadeSelect({  
  98.                         el: "#" + navArr[2].id,  
  99.                         dataArr: startDists,  
  100.                         startIndex: distStartIndex  
  101.                     });  
  102.                     var cityScroller = new SCS.scrollCascadeSelect({  
  103.                         el: "#" + navArr[1].id,  
  104.                         dataArr: startCities,  
  105.                         startIndex: cityStartIndex,  
  106.                         onChange: function(selectedItem, selectedIndex) {  
  107.                             distScroller.render(getAddrsArrayById(selectedItem.key), 0); //re-render distScroller when cityScroller change  
  108.                         }  
  109.                     });  
  110.                     var provScroller = new SCS.scrollCascadeSelect({  
  111.                         el: "#" + navArr[0].id,  
  112.                         dataArr: PROVINCES,  
  113.                         startIndex: provStartIndex,  
  114.                         onChange: function(selectedItem, selectedIndex) { //re-render both cityScroller and distScroller when provScroller change  
  115.                             cityScroller.render(getAddrsArrayById(selectedItem.key), 0);  
  116.                             distScroller.render(getAddrsArrayById(cityScroller.getSelectedItem().key), 0);  
  117.                         }  
  118.                     });  
  119.                 });  
  120.             });  
  121.             </script>  
  122.               

 


原文地址:http://www.freejs.net/article_biaodan_936.html