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