CODEWITHSUNDEEP
jqueryhtmlajaxselect
Anubhav
Anubhav

Reputation: 362

How to use nested select using Jquery Ajax

I have 3 select Boxes. From the selection of first select Box, i am getting the options for second select Box. That comes easily using the jQuery Ajax. But after this second select box on change is not working for getting the Jquery ajax output, which i have to put in third select box. I have following three select Boxes 1) College select Box 2) Course type select box 3) Branch type select Box.

From college select box, i select a college, then using Jquery:ajax i got course type options for Course type select box. But when i am selecting any one option from Course type then it is not working. I am using Php for ajax.

my code is follows:

   <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>

Upvotes: 0

Views: 2242

Answers (3)

Vishal Nair
Vishal Nair

Reputation: 2191

There must be a common parent div for all those select boxes say its id is #parentdiv . Example :

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

now you will have to just change $("#coursename").on('change', function() to $("#parentdiv").on('change','#coursename' function() and do the same for others.. And don't forget to add everything inside 

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

Your code is not working because the new select box come from ajax and was not their when the DOM was loaded so it could not find it if you directly refer to $("#coursename") . Thats the reason we have to first associate its parent and then find for #coursename inside that parent.

Upvotes: 0

blafasel
blafasel

Reputation: 1121

Each time an inout into your first select occurs you completely replace the second one. This deletes not only the old entries but also the registered event handlers.

You should either:

  1. Only replace the select options of the second select (not the select itself) upon change in the first field or
  2. perform the registration of event handlers each time there is a change. JQuery supports this by the live()-method. (If you prefer this, have a look at http://api.jquery.com/live/)

Upvotes: 2

Mister Epic
Mister Epic

Reputation: 16723

You are referencing your select in your script before it being defined in your markup. You should wrap your event handlers in $( document ).ready() to ensure the targeted elements will be available for binding:

ref: http://learn.jquery.com/using-jquery-core/document-ready/

Upvotes: 0

Related Questions