0

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>
Improve this question
1
  • can you give jsfiddle? Commented Mar 29, 2014 at 13:56

3 Answers 3

Reset to default
2

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/)
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

A code example would have helped him a lot.. anyways thumbs up
0

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/

Improve this answer

Comments

0

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.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.