一个小问题，能写出代码更好

我现在有两个下拉框，第一个是一个选择班级的。第二个是选择学生的，现在就是先选择班级，然后再根据班级编号去获取学生下拉框的内容，因为数据库都有，所以我平时喜欢用集合，这个是二级联动吗，只能使用数组来进行二级联动吗，有源码更好

就是一个联动。根据第一个的编号获取第二个同学的数据
arr和nameData 都需要换成 ajax 获取数据

<!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>
    <style>

    </style>
</head>

<body>
    班级：<select name="class" id="class">
        <!-- <option value=""></option> -->
    </select>

    姓名：<select name="name" id="name">
        <!-- <option value=""></option> -->
    </select>
</body>
<script>
    let clas = document.getElementById("class");
    let name = document.getElementById("name");

    let arr = [ //班级 数据
        {
            name: "初三一班",
            id: 1
        },
        {
            name: "初三二班",
            id: 2
        }
    ];
    let clasStr = "";
    let nameStr = "";
    for (var i = 0; i < arr.length; i++) {
        clasStr += `<option value=${arr[i].id}>${arr[i].name}</option>`
    };
    clas.innerHTML = clasStr;

    clas.onchange = function (e) {
        let val = clas.value;
        nameStr = "";
        //模拟请求 接口 需要传一个 id获取 班级下的人
        setTimeout(() => {
            let nameData = [
                {
                    name: "莉莉",
                    id: 1
                },
                {
                    name: "ww",
                    id: 2
                }
            ];
            for (var i = 0; i < nameData.length; i++) {
                nameStr += `<option value=${nameData[i].id}>${nameData[i].name}</option>`
            };
            name.innerHTML = nameStr;

        }, 1000)
    }
</script>

</html>


1、是级联选择器
2、我觉得应该是三级，年纪也分班吧？如果没有那就是二级
3、例如：数组结构：items: [{
          text: "一年级",
          value: "1-0",
          children: [{
              text: "1.1班",
              value: "1-1",
              children:[{
                    text:"小明",
                    value:"1-1-1"
                }]
            },
            {
              text: "1.2班",
              value: "1-2",
              children:[{
                    text:"小红",
                    value:"1-2-1"
                }]
            }
          ]
        },
        {
          text: "二年级",
          value: "2-0"
        },
        {
          text: "三年级",
          value: "3-0"
        }]

1.简单介绍一下思路

<select onchange="change(this.value)">
            <option value="1">班级一</option>
            <option value="2">班级二</option>
            <option value="3">班级三</option>
            <option value="4">班级四</option>
        </select>

        <script>
            function change(val) {
                console.log(val);
                // 在这里可以检测到每次修改的值 ,也就是 1 ,2 ,3,4
                // 你这里获取到了班级的id 然后发起请求去获取学生的信息
            }
        </script>

可以认为这个是二级联动，你所说的的集合和数组都可以实现啊。
有两种做法：
1、点击班级时调用查询学生接口
2、一次接口把数据都查询出来，然后组合好返回给前端

就是一个正常的联动查询，后台写两个简单的接口就行了，一个是获取所有班级下拉框的list数据，一个是根据班级id获取所有学生list的数据

可以用二级联动的，也可以使用两个selece下拉框啊

从业务逻辑来说，这就是一个二级联动。

具体的实现，其实还依据你数据提供的规则。

此外，如果数据量相对较少，推荐还是一次性获取数据。

这样效果的实现就成了纯前端处理啦。