挪动端开发中可能会波及到树状数据的抉择，因为 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>

欢送你参加奉献！👏