如何改變 <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
});