Question

我有3个选择框。从第一个选择Box的选择，我得到第二个选择框的选项。这很容易使用jQuery Ajax。但是在更改后的第二个选择框不能用于获取Jquery ajax输出，我必须将其放入第三个选择框。我有三个选择框 1）大学选择框 2）课程类型选择框 3）分支类型选择框。

从大学选择框，我选择一个大学，然后使用Jquery：ajax我得到课程类型选择框的课程类型选项。但是，当我从课程类型中选择任何一个选项时，它就无法正常工作。我正在使用Php作为ajax。

我的代码如下：

   <script>
    $("#collegename").change(function() {
      var collegeID = $("#collegename").val();
      $.ajax({
        url: "ajax/getCollegeBranchDetailsTotal.php",
        type: "POST",
        data: {ID : collegeID},
        dataType: "json",
        success: function(data){
           if(data.success){
             var outputHtml = '';
             var SelectStart = '<select id="coursename" name="coursename"><option value=""> Select a Course </option>';
             var SelectEnd = '</select>';
             var options = '';
             if(data.branchData){
               $.each( data.branchData, function( course, branchdetails ) {
               var optionParam = '<option value='+ data.courseData[course] +'> ' + course + '</option>'; 
               options = options + optionParam;                                
             });                            
            }
         outputHtml = SelectStart + options + SelectEnd;
         $(".courseDiv").html(outputHtml);                                                
         }
        }
       });
      });
     $("#coursename").on('change', function() {
        var collegeID = $("#collegename").val();
    $.ajax({
          url: "ajax/getCollegeBranchDetailsTotal.php",
          type: "POST",
          data: {ID : collegeID},
          dataType: "json",
          success: function(data){
             if(data.success){
        var outputHtml = '';
        if(data.branchData){
                   var SelectStart = '<select id="branchname" name="branchname"><option value=""> Select a Branch </option>';
                   var SelectEnd = '</select>';
                   var options = '';
                   $.each( data.branchData, function( course, branchdetails ) {
                    $.each( branchdetails, function( id, name ) {
                     var optionParam = '<option value="'+ id +'"> ' + name + '</option>'; 
                     options = options + optionParam;  
                    });
                   });
                   outputHtml = SelectStart + options + SelectEnd;
                  }
                  $(".branchNames").html(outputHtml);                                                
                 }
                }
           });
       });
    </script>
    <body>
    <div class="block">
     <div class="label">College Name:</div>
     <div class="collegeDiv">
      <select id="collegename" name="collegename" />
       <option value=''> Select a College </option>
        <?php
          foreach ($collegeNames as $id => $values) {
           print "<option value='$id'> " . $values["Name"] . "</option>";
          }
        ?>
        </select><br />
      </div>
     </div>
     <div class="block">
      <div class="label">Course Name: </div>
      <div class="courseDiv">
       <select id="coursename" name="coursename" />
        <option value=''> Select a Course </option>
       </select><br />
      </div>
     </div>
     <div class="block">
      <div class="label">Branch Name: </div>
      <div class="branchNames">
        <select id="branchname" name="branchname" />
          <option value=""> Select a Branch </option>
        </select><br />
      </div>
     </div>
    </body>

Answer 1

每次进入第一次选择时，您都会完全替换第二次选择。这不仅会删除旧条目，还会删除已注册的事件处理程序。

你应该：

仅在第一个字段或
每次更改时都会执行事件处理程序的注册。 JQuery通过live（）方法支持这一点。（如果您愿意，请查看http://api.jquery.com/live/）

Answer 2

所有这些选择框必须有一个共同的父div，表示其ID为#parentdiv。示例：

<div id="parentdiv">
   //all the 3 select boxes will come inside this parent div
</div>

现在您只需将$("#coursename").on('change', function()更改为$("#parentdiv").on('change','#coursename' function()，并为其他人执行相同操作。并且不要忘记在里面添加所有内容

$(document).ready(function(){
//all code here 
});

您的代码无效，因为新的选择框来自ajax，而不是它们在加载DOM时的情况，因此如果您直接引用$("#coursename")，则无法找到它。这就是我们必须先关联其父级然后在该父级内找到#coursename的原因。

Answer 3

在标记中定义之前，您在脚本中引用了select。您应该将事件处理程序包装在$( document ).ready()中，以确保目标元素可用于绑定：

参考：http://learn.jquery.com/using-jquery-core/document-ready/

如何使用Jquery Ajax使用嵌套选择

3 个答案: