how to create Cascaded Dropdown with jQuery Ajax and PHP

              in this tutorial i have provide that how to create dropdown using jQuery and PHP.a dropdown easy to create in php using jquery.It's provide good idea to filter and show that user what is needed to be displayed. Suppose we have create a dropdown for top business man with his country.so first ask him to select a country.and than second dropdown list he will be see only business man of each country.

                     so here we will create a simple cascaded dropdown with country, state and each state cities dropdown. here i have created one database with three tables to store country, state, and city information. by clicking

download button to you can get full source code of this tutorial.below given sample code,

                                                   

PHP Code :

<p style="text-align: justify;">



<div id="dropdowns">




 <div id="center" class="cascade">



 <?php



 $sql = "SELECT * FROM tbl_country ORDER BY country_name";



 $query = mysqli_query($con, $sql);



 ?>



 <label>Country:



 <select name="country" id = "drop1">



 <<span id="IL_AD6" class="IL_AD">option value</span>="">Please Select</option>



 <?php while ($rs = mysqli_fetch_array($query, MYSQLI_ASSOC )) { ?>



 <option value="<?php echo $rs["id"]; ?>"><?php echo $rs["country_name"]; ?></option>



 <?php } ?>



 </select>



 </label>



 </div>



 <div class="cascade" id="state"></div>



 <div id="city" class="cascade"></div>



 </div>



</p>

Now below given jQuery code to create second dropdown for selected country states.

<p style="text-align: justify;">



<script>



$(document).ready(function(){



$("select#drop1").change(function(){



var country_id = $("select#drop1 option:selected").attr('value');



// alert(country_id);



 $("#state").html( "" );



 $("#city").html( "" );



 if (country_id.length > 0 ) {



 $.ajax({



 type: "POST",



 url: "fetch_state.php",



 data: "country_id="+country_id,



 cache: false,



 beforeSend: function () {



 $('#state').html('<img src="loader.gif" alt="" width="24" height="24">');



 },



 success: function(html) {



 $("#state").html( html );



 }



 });



 }



});



});



</script>



</p>

I love to help people in solving their problems.Join this blog to solve your problems.