html部分

 <ul class="mui-table-view">
            <div class="mui-input-row">
                  <label>省/市</label>
                  <li class="mui-table-view-cell">
                       <a class="mui-navigate-right" id="region">請選擇省/市</a>
                  </li>
            </div>
  </ul>
 

js多次載入的寫法

   //引用的外掛city.data-3.js和mui.picker.min.css
   //還需mui.min.js和mui.min.css支援
   //地區聯動
   
    region.addEventListener('tap', function () {
            var adressStr = '';
             //顯示幾層，我們要顯示省、市、區，所以我們這裡寫三層，如果不寫預設是一層
             var addressPicker = new mui.PopPicker({
                 layer: 2
             });

        //city.data-3.js中的資料
        addressPicker.setData(cityData3);
       
        addressPicker.show(function (selectItems) {
            //將選擇的省、市、區顯示到螢幕上
            for (var i = 0; i < selectItems.length; i++) {
                adressStr += selectItems[i].text;
                province=selectItems[0].text;
                city=selectItems[1].text;
            }
            region.innerHTML = adressStr;
        });
    })
 

js不會多次載入的寫法

   //引用的外掛city.data-3.js和mui.picker.min.css
   //還需mui.min.js和mui.min.css支援
   //地區聯動
   
   //顯示幾層，我們要顯示省、市、區，所以我們這裡寫三層，如果不寫預設是一層
    var addressPicker = new mui.PopPicker({
          layer: 2
    });
    region.addEventListener('tap', function () {
         var adressStr = '';
            

        //city.data-3.js中的資料
        addressPicker.setData(cityData3);
       
        addressPicker.show(function (selectItems) {
            //將選擇的省、市、區顯示到螢幕上
            for (var i = 0; i < selectItems.length; i++) {
                adressStr += selectItems[i].text;
                province=selectItems[0].text;
                city=selectItems[1].text;
            }
            region.innerHTML = adressStr;
        });
    })