mui城市三級聯動
阿新 • • 發佈：2019-01-04
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <link href="css/mui.min.css" rel="stylesheet"/> <link href="css/mui.picker.css" rel="stylesheet"/> <link href="css/mui.poppicker.css" rel="stylesheet"/> <style type="text/css"> </style> </head> <body> <header class="mui-bar mui-bar-nav mui-bar-transparent"> <h1 class="mui-title">標題</h1> </header> <div class="mui-content"> <input type="button" value="xianshi" onclick="showPick()"/> </div> <script src="js/mui.min.js"></script> <script src="js/city.data.js"></script> <script src="js/city.data-3.js"></script> <script src="js/mui.poppicker.js"></script> <script src="js/mui.picker.js"></script> <script type="text/javascript" charset="utf-8"> mui.plusReady(function(){ }) function showPick(){ var picker = new mui.PopPicker({ //三級聯動 layer: 3 }); picker.setData(cityData3); var adressStr = ''; //設定預設選擇地址 picker.pickers[0].setSelectedIndex(2); picker.pickers[1].setSelectedIndex(1); picker.pickers[2].setSelectedIndex(0); picker.show(function(SelectedItem) { //將選擇的省、市、區顯示到螢幕上 for (var i = 0; i < SelectedItem.length; i++) { adressStr += SelectedItem[i].text; } console.log(adressStr); }); } </script> </body> </html>