jsp文件如何让下拉框动态读取数据库

比如我现在数据库有分成三级的表
我现在想要下拉框实现第一个下拉框读取数据库中第一个表的数据，然后第二个下拉框读取第一个下拉框中数据的id作为条件搜索第二级的表中对应的数据
，然后第三个下拉框同理，求解

第一个下拉框的值提前请求接口加载数据，当点击第一个下拉框里面的内容时根据id请求第二个下拉框的接口，展示数据，点击第二个下拉框里面的内容同理加载第三个下拉框的内容

思路：父数据onchange事件(onchange事件写在父数据的select下拉框那)，触发方法执行ajax加载子数据。

html:
班级:<select id="cid" name="cid">
           <option value="0" selected="selected">请选择</option>
           <c:forEach items="${clist }" var="clist">
             <option value="${clist.id }">${clist.name }</option>
           </c:forEach>
        </select><hr />
    题目:<select name="zid" id="zid">
           <option value="0">请选择</option>
        </select><hr />
                全题:<div id="zuoye">正在加载中。。。</div>

js:
$(function() {
 $("#cid").change(function() {
  AddZuoye();
 });
});
$(function() {
 $("#zid").change(function() {
  AddTimu();
 });
});
function AddZuoye() {
 $.post('SearchZuoye', {cid : $("#cid").val()}, function(json) {
  $("#zid").empty();
  if (json == "0") {
   $("#zid").append("<option value='0'>请选择</option>");
  }else if(json=="-1"){
   $("#zid").append("<option value='0'>无作业</option>");
  }else {
   for (var i = 0; i < json.length; i++) {
    if(json[i].status==0&&json[i].reason==null){
     $("#zid").append("<option value="+json[i].id+">" + json[i].timu.substring(0,45)  + "</option>");
     AddTimu();
    }
   }
  }
 },"json");
}
function AddTimu() {
 $.post('SearchTimu', {zid : $("#zid").val()}, function(json) {
  $("#zuoye").empty();
  for (var i = 0; i < json.length; i++) {
   $("#zuoye").append("<textarea style='width: 700px;height: 90px;'>" + json[i].timu + "</textarea>");
  }
 },"json");
}

给第一个下拉框一个onchang事件,当第一个下拉框值改变了,,就调用onchange方法拿到第一个下拉框的id,在调用ajax获取数据,成功后在赋值给第2个下拉框

可以使用select 选择事件，选择事件绑定第一个select，去请求数据，将数据赋值到第二个select中，同理，选择事件绑定第二个select，去请求数据，将数据赋值到第三个select中

可以参考这个博主写的 https://blog.csdn.net/liyong199012/article/details/8192158 我最近也在搞这个问题，正在学习中。如果博主有更好的方法，请分享