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





10 comments:

  1. Thank you very very much

    ReplyDelete
  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

    ReplyDelete
    Replies
    1. Dear Mehul,
      you can download complate example from below link
      http://easyscript4u.com/download/cascaded_drop_down_a_Easyscript4u.rar


      http://easyscript4u.com is our official website so now get more information and help visit our official website.

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

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

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

    ReplyDelete