jquery 城市三级选择器

header 文件的引入

<link rel="stylesheet" href="css/mui.min.css">
<link rel="stylesheet" href="css/mui.picker.css">
<link rel="stylesheet" href="css/mui.poppicker.css"/>

<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script src="js/mui.js"></script>
<script src="js/update.js" type="text/javascript" charset="utf-8"></script>
<script src="js/mui.picker.js" type="text/javascript" charset="utf-8"></script>
<script src="js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
<script src="js/city.data-3.js" type="text/javascript" charset="utf-8"></script>

HTML内容区域

<p class="box-top" >北京市 北京市 东城区</p>

jquery 部分

<script type="text/javascript">

// 选择省市区
var city_picker = new mui.PopPicker({layer:3});
city_picker.setData(cityData3);
$("#city_text").on("tap", function(){
city_picker.show(function(items){

// $("#city_id").val((items[0] || {}).value + "," + (items[1] || {}).value + "," + (items[2] || {}).value);//该ID为接收城市ID字段  自己不需要，就把他给删除了
$(".box-top").html((items[0] || {}).text + " " + (items[1] || {}).text + " " + (items[2] || {}).text);
});

});

</script>

 

补充内容：

自己在写城市三级联动选择是，出现了，没有对数据进行setdata（）转存，所以研究了很长时间，

如果大家出现类似或其他问题，可以参考这篇文章：

https://www.jianshu.com/p/4f23396553c4