如何改变 <option>第3个<select>基于第二次变化<select> ，其中第二个是通过使用jquery ajax更改第一个下拉列表的值来绘制的

Question

我的项目（学校管理层）有点奇怪的情况，在互联网上找不到合适的解决方案。 这是问题，我有三个<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>

更改#class后我的ajax代码绘制#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（就像在课堂上一样）绘制到draw_course.php并从数据库中选择该部分的课程，然后在第3个下拉中绘制它（就像它在第一个下拉即类中所做的那样）但问题是这些部分是通过ajax绘制的，选择一个部分不会影响课程下拉。 这些部分在源代码中也不存在。 因为我是ajax的初学者，所以无法比这更好地解释我的问题。

Answer 1

试试jQuery .on

  $("#section").on('change',function(){
      //code here
    });

Answer 2

你需要使用delegate或on因为select框是动态构建的

$("body").delegate('#section','change',function(){
  //code
});

要么

$("#section").on('change',function(){
//code
});