如何更改<；选项>；第三<；选择>；基于2nd<；选择>；，其中，通过使用jquery ajax

我的项目（针对学校管理层）遇到了一个奇怪的情况，在互联网上找不到合适的解决方案。问题是，我有三个<select>元素，第一个是选择班级，第二个是选择该班级中的部分，第三个是从该部分中选择课程。代码如下

<select id="class">
    <option value="class1">Class 1</option>
    <option value="class2">Class 2</option>
</select>

<select id="section">
    <!--sections will be drawn here from database using ajax, based on class selected in 1st dropdown-->
</select>

<select id="course">
    <!--when a section is selected in 2nd dropdown, courses of that section will be drawn here from database using ajax-->
</select>

我的ajax代码在后面更改#class时绘制#section，它只需将选定的类发送到draw_sections.php，在那里我使用$_GET[]获取其值，并在查询中使用它从数据库中选择该类的部分

$("#class").change(function(){
   var class = $(this).val();
   $.ajax({
       url: "draw_sections.php?class="+class+"", success: function(sections) {
         $("#section").html(sections);
       } 
    });
});

到目前为止，它还可以很好地绘制所选类的部分。现在，当在第二个<select>中选择一个部分时，我想在第三个下拉<select>中绘制课程。这是ajax我的ajax代码

$("#section").change(function(){
       var section = $(this).val();
       $.ajax({
           url: "draw_courses.php?section="+section+"", success: function(courses) {
             $("#course").html(courses);
           } 
        });
  });

这个函数的目的是将section（就像在课堂上一样）带到drawcourse.php，从数据库中选择该section的课程，然后在第三个下拉菜单中绘制（就像在第一个下拉菜单ie类中一样）但问题是，由于章节是通过ajax绘制的，因此选择一个章节不会影响课程的下拉列表。此外，源代码中也不存在这些部分。由于我是ajax的初学者，所以无法更好地解释我的问题。