mui城市三级联动

最新推荐文章于 2019-12-27 16:50:11 发布

moonIsLander

最新推荐文章于 2019-12-27 16:50:11 发布

阅读量2.8k

点赞数

分类专栏： htmlPlus

本文链接：https://blog.csdn.net/weixin_41756995/article/details/81455684

版权

htmlPlus 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!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>

moonIsLander

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
mui城市三级联动

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no
复制链接

扫一扫