N-Level of Dynamic Loading of DropDowns using Ajax and PHP. Part 2

This is version 2 of my previous tutorial which was dynamic loading of combos with Ajax. But its much more than that. Its now for n-level dropdowns, I mean if you have parent-child records untill n-level and you want to load them using dropdowns with ajax. It is my favorit tutorial and very useful for any one. We often needs ajax loading of dropdowns and this is for n-level records. Hope you will like it. Cheers !

PHP

$(document).ready(function() { //$('#loader').hide(); $('.parent').livequery('change', function() { $(this).nextAll('.parent').remove(); $(this).nextAll('label').remove(); $('#show_sub_categories').append('<img id="loader" style="float: left; margin-top: 7px;" src="loader.gif" alt="" />'); $.post("get_chid_categories.php", { parent_id: $(this).val(), }, function(response){ setTimeout("finishAjax('show_sub_categories', '"+escape(response)+"')", 400); }); return false; }); }); function finishAjax(id, response){ $('#loader').remove(); $('#'+id).append(unescape(response)); }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

$(document).ready(function() {   //$('#loader').hide();   $('.parent').livequery('change', function() {   $(this).nextAll('.parent').remove(); $(this).nextAll('label').remove();   $('#show_sub_categories').append('<img id="loader" style="float: left; margin-top: 7px;" src="loader.gif" alt="" />');   $.post("get_chid_categories.php", { parent_id: $(this).val(), }, function(response){   setTimeout("finishAjax('show_sub_categories', '"+escape(response)+"')", 400); });   return false; }); });   function finishAjax(id, response){     $('#loader').remove();     $('#'+id).append(unescape(response));   }

PHP

<div id="show_sub_categories"> <select class="parent" name="search_category"> <option selected="selected">-- Categories --</option> <option value="<?php echo $rows['id'];?>"></option> </select> </div>

1 2 3 4 5 6 7

<div id="show_sub_categories">   <select class="parent" name="search_category">   <option selected="selected">-- Categories --</option>     <option value="<?php echo $rows['id'];?>"></option>   </select> </div>