如何使用JQuery Ajax嵌套选择

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

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

来源

2014-03-29 Anubhav

你能给jsfiddle吗？ –

每次一个INOUT到您的第一选择时，你完全取代第二个。这不仅会删除旧条目，还会删除已注册的事件处理程序。

您应该：

只有当变化在第一场中替换所述第二选择（未选择本身）的选择选项或
执行事件处理程序的注册每次有一个更改。 JQuery通过live（）方法支持这一点。（如果你喜欢这个，看看http://api.jquery.com/live/）

来源

2014-03-29 13:25:16 blafasel

一个代码示例会帮助他很多.. anyways竖起大拇指 – gaurav

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

来源

2014-03-29 13:22:32

感谢它的工作.. – Anubhav

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

裁判：http://learn.jquery.com/using-jquery-core/document-ready/

来源

2014-03-29 13:22:38

如何使用JQuery Ajax嵌套选择

回答

相关问题