mui框架实现三级联动(省市区)

最新推荐文章于 2026-03-12 19:19:44 发布

原创最新推荐文章于 2026-03-12 19:19:44 发布 · 2.5k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端

本文档详细介绍了如何利用mui框架来实现三级联动效果，具体包括HTML结构设计、CSS样式引入（包括mui和picker插件）、JS文件的准备以及城市数据的处理。教程中提到了2018年的一个city.js插件，该插件提供了城市信息的JSON格式数据。

mui框架实现三级联动(省市区)

前提:是基于mui,所有要下载mui的包

1—html部分

<input type="text" placeholder="请选择地址"  id="site"/>

2—CSS：引入mui及mui封装的选择列表插件picker样式

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

3—JS的引入：大致同上额外准备用来存储城市信息的JS

<!-- 由于这里的js用的是zepto.js,所以要引用 -->
<script src="js/zepto.min.js"></script>
<script src="js/mui.min.js"></script>
<script src="js/mui.picker.js"></script>
<script src="js/mui.poppicker.js"></script>
<!-- 这里的city.js是省市区的所有数据,下面有链接 -->
<script src="js/city.js"></script>

4—js代码部分

<script>
	//注意一定不要忘记写入口函数!!!
    $(function () {
       //选择省市区 
        var city_picker = new mui.PopPicker({
            layer: 3
        });
        //注意:city_picker.setData()里的值为cityData,不要写错
        city_picker.setData(cityData);
        //点击事件的DOM对象对应的ID值要一致
        $("#site").on("tap", function () {
            setTimeout(function () {
                city_picker.show(function (items) {
                    if ((items[0] || {}).text == undefined) {
                        (items[0] || {}).text = "";
                    } else if ((items[1] || {}).text == undefined) {
                        (items[1] || {}).text = "";
                    } else if ((items[2] || {}).text == undefined) {
                        (items[2] || {}).text = "";
                    }
                    //该ID为接收城市ID字段 
                    $("#site").val((items[0] || {}).text + "-" + (items[1] || {}).text + "-" + (items[2] || {}).text);
                });
                //200为事件延迟时间(毫秒),可以设置false为没有延迟,点击立即执行
            }, 200);
        });
    })
</script>

2018城市city.js插件 json格式:
https://download.csdn.net/download/qq_27089015/10213690

标签

#mui框架实现三级联动(省市区)