Wednesday, 2 April 2014

Filled Under:

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 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">
 $sql = "SELECT * FROM tbl_country ORDER BY country_name";
 $query = mysqli_query($con, $sql);
 <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 } ?>
 <div class="cascade" id="state"></div>
 <div id="city" class="cascade"></div>

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

<p style="text-align: justify;">
var country_id = $("select#drop1 option:selected").attr('value');
// alert(country_id);
 $("#state").html( "" );
 $("#city").html( "" );
 if (country_id.length > 0 ) {
 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 );

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


  1. Thank you very very much

  2. please tell me that where i can download this code because when i click on download it will redirect another website
    thank you in advance

    1. Dear Mehul,
      you can download complate example from below link is our official website so now get more information and help visit our official website.

  3. Really Nice Information,Thank You Very Much For Sharing.
    Web Designing Company

  4. Thank you for sharing valuable information. Nice post. I enjoyed reading this post.SPA IN KUMBAKONAM, SPA IN TRICHY, SPA IN THANJAVUR

  5. Thank u for your wonderful topic to be share it your page and get more interesting topic to be displayed your page For More Details:Find Girls,bharat matrimony,
    Chettiar Matrimony,Christian Matrimony.

  6. SQream Technologies provides you with a state of the art software which combines modern GPU technology (Graphic Processing Units) with the best practices in today’s Big Data platforms, providing up to 100x faster insights from data.
    Bigdata Training in Chennai OMR

  7. Thanks for sharing an information to us. If someone want to know about Digital Marketing and SEO Service. I think this is the right place for you!
    SEO Service |
    SEO Company

  8. Hello, I read your blog occasionally, and I own a similar one, and I was just wondering if you get a lot of spam remarks? If so how do you stop it, any plugin or anything you can advise? I get so much lately it’s driving me insane, so any assistance is very much appreciated.
    Data Science Training in Chennai | Best Data Science Training in Chennai
    Android Training in Chennai | Best Android Training in Chennai
    Devops Course Training in Chennai | Best Devops Training in Chennai