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>

我的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);
           } 
        });
  });

这个函数的目的是将部分（就像它在课堂上所做的那样）绘制到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
});

如何根据第二次</select>中的更改更改第三个<select>的<option>，其中第二个是通过使用jquery ajax更改第一个下拉列表的值来绘制的</option>

2 个答案: