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.





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

    ReplyDelete
  5. A list of all the best wordpress sports themes in one place. Includes themes for sports clubs, sports magazines, and even sites about your favorite team.

    ReplyDelete