移動端開發中可能會涉及到樹狀數據的選擇，由於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>

歡迎你參與貢獻！👏