如何用在PJF框架下实现二级联动菜单

问题遇到的现象和发生背景

便民服务费，关联{name :"1001",desc :"燃气费"}，{name :"1001",desc :"水费"}，{name :"1002",desc :"电费"}，
政府服务费，关联{name :"1005",desc :"税费"}，{name :"1006",desc :"五险一金"}

问题相关代码，请勿粘贴截图

PJF 不太懂，以jQuery的形式给你完成了


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form action="#" method="post">
      <select name="mmc1" id="mmc1">
        <option value="0">请选择</option>
      </select>
      <select name="mmc2" id="mmc2">
        <option value="0">请选择</option>
      </select>
    </form>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
      let parentList = [
        {
          name: "1",
          desc: "便民服务费",
        },
        {
          name: "2",
          desc: "政府服务费",
        },
      ];

      let childObj = {
        1: [
          { name: "1001", desc: "燃气费" },
          { name: "1001", desc: "水费" },
          { name: "1002", desc: "电费" },
        ],
        2: [
          { name: "1005", desc: "税费" },
          { name: "1006", desc: "五险一金" },
        ],
      };

      parentList.forEach(function (item) {
        $("#mmc1").append(`<option value="${item.name}">${item.desc}</option>`);
      });

      $("#mmc1").change(function (e) {
        const value = e.target.value;
        $("#mmc2 option").remove();
        childObj[value].forEach(function (item) {
          $("#mmc2").append(
            `<option value="${item.name}">${item.desc}</option>`
          );
        });
      });
    </script>
  </body>
</html>

问题遇到的现象和发生背景

问题相关代码，请勿

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <script type="text/javascript">
        
    </script>
    <body>
        
        <form action="#" method="post">
            <select name="mmc1" id="mmc1">
                <option value="0">请选择</option>
            </select> 
            <select name="mmc2" id="mmc2">
                <option value="0">请选择</option> 
            </select> 
        </form>
    </body>
</html>
============================
PJF.html.body({
var mmc1 = PJF.ui.select({
dom :"mmc1",
require:"true",
data :["便民服务费","政府服务费"]，
onfocus : function(){
var mmc1=document.getElementById("mmc1");
            mmc1.length=this.data.length+1;
            for(var i=1;i<mmc1.length;i++){
                mmc1[i].innerHTML=this.data[i-1];
                mmc1[i].value=i;
            }
},
onchange : function(){
var mmc2=document.getElementById("mmc2");
            var mmc1=document.getElementById("mmc1");
         var allList=[
                    [{name :"1001",desc :"燃气费"}，{name :"1001",desc :"水费"}，{name :"1002",desc :"电费"}，],
                    [{name :"1005",desc :"税费"}，{name :"1006",desc :"五险一金"}],    ];
            mmc2.value=0;
            var List=allList[mmc1.value-1];
            mmc2.length=List.length+1;
            for(var i=1;i<mmc2.length;i++){
                mmc2[i].innerText=List[i-1].desc;
                mmc2[i].value=i;
            }
}
});

var mmc2 = PJF.ui.select({
dom :"mmc2",
require:"true",
});

})

```

运行结果及报错内容

第一个下拉框有便民服务费和政府服务费，但联动的下拉框中没有数据，实现不了二级联动

我的解答思路和尝试过的方法

我想要达到的结果

当选择便民服务费，第二个下拉框就会出现燃气费水电费，供选择。
类似于选择某个省，第二个下拉框出现该省的市，供选择。