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;
});
})
插件下载路径:https://download.csdn.net/download/qq_32741973/10676147