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

【问题标题】：How to use nested select using Jquery Ajax如何使用 Jquery Ajax 使用嵌套选择
【发布时间】：2014-05-09 00:30:00
【问题描述】：

我有 3 个选择框。从第一个选择框的选择中，我得到了第二个选择框的选项。使用 jQuery Ajax 很容易做到这一点。但是在这第二个选择框更改后无法获取 Jquery ajax 输出，我必须将其放入第三个选择框。我有以下三个选择框 1) 学院选择框 2) 课程类型选择框 3) 分支类型选择Box。

从大学选择框中，我选择一所大学，然后使用 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>

【问题讨论】：

可以给jsfiddle吗？

标签： jquery html ajax select

【解决方案1】：

所有选择框都必须有一个共同的父 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 的原因。

【讨论】：

【解决方案2】：

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

您应该：

仅在第一个字段发生更改时替换第二个选择的选择选项（而不是选择本身）或
每次发生更改时都执行事件处理程序的注册。 JQuery 通过 live() 方法支持这一点。（如果你喜欢这个，看看http://api.jquery.com/live/）

【讨论】：

一个代码示例会对他有很大帮助.. 无论如何都竖起大拇指

【解决方案3】：

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

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

【讨论】：