挪动端开发中可能会波及到树状数据的抉择，因为mui中没有比拟好的组件能够应用，所以我基于mui和jq开发了一款能够在挪动端操作级联的气泡组件。
源码地址：https://github.com/booms21/mC...
mCascader
mCascader 是一款mui格调的挪动端h5气泡级联框，反对可抉择任意层级、默认值、分隔符
应用办法：
首先引入mui和jq库，mCascader.css（cascader的款式）
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/mui/3.7.1/js/mui.min.js"></script> <link href="https://cdn.bootcdn.net/ajax/libs/mui/3.7.1/css/mui.min.css" rel="stylesheet" /> <link href="css/mCascader.css" rel="stylesheet" /> <script src="js/mCascader.js"></script>间接调用mCascader办法，并传入配置项：
mCascader({ input:'#demo', //对应input的id data:data, //mCascader 的数据 value:[''],//mCascader的默认值,默认值节点的id字符串 separator:'/', //input中的分隔符 onClick:function(node){ //当抉择实现时的回调函数，node为以后点击的点击的节点 console.log(node) } });input：
对应文本框的选择器，字符串类型
data：
mCascader的数据。Array类型，树结构，data中的节点必须要有以下属性：
data = [{ id:'', // 必须,惟一的id值，String类型 name:'', //必须,对应mCascader节点的显示文本 ，String类型 children:[...] //子节点 ，Array类型 },...]获取mCascader以后的id值(2种)：
1.mCascader.currtId
2.$('#demo').data('id')或$(mCascader.options.input).data('id')
返回上一层级：
mCascader.back()
清空mCascader数据及重置界面：
mCascader.clear()
例子：
mcascader的DOM不写死到js中，保留了本来组件的构造，不便你自定义组件的款式
<div id="mcascaderPopover" class="mui-popover"> <div class="label"> <button type="button" id="goback" class="mui-btn mui-btn-outlined" onclick="mCascader.goBack()" > <span class="mui-icon mui-icon-back"></span></button >请抉择一个节点 </div> <div id="mcascader"> <p id="noData" style="display: none">无数据</p> <ul class="mui-table-view"></ul> </div> </div> <div class="mui-input-row"> <div class="label"><a href="#mcascaderPopover"></a>节点：</div> <input type="text" id="demo" placeholder="请抉择" readonly /> </div> <script src="js/mCascader.js"></script> <script> var json = [ { name: "节点1", id: "1", children: [ { name: "节点11", id: "1-1", children: [] }, { name: "节点12", id: "1-2", children: [ { name: "节点122221", id: "1-2-1", children: [] }, { name: "节点12222222", id: "1-2-2", children: [] }, ], }, { name: "节点123", id: "1-3", children: [] }, { name: "节点244", id: "1-4", children: [] }, ], }, { name: "节点2", id: "2", children: [ { name: "节点24411111", id: "2-4", children: [] }, { name: "节点55555", id: "2-7", children: [] }, ], }, ]; //存储过滤的值 mCascader({ input: "#demo", //对应input的id data: json, //mCascader 的数据 value: ["1-2-2"],//mCascader的默认值 separator: "/", //input中的分隔符 onClick: function (node) { //当抉择实现时的回调函数 console.log(node); }, }); </script>欢送你参加奉献！