Select Dropdown By Ajax

I need some ajax code to do some functions with drop down. I have three table of values: one for country, then state and city. And I have three dropdown to show these values. Firs

Solution 1:

If you are already familiar with jQuery, you might want to check how to send ajax requests through $.ajax() (http://api.jquery.com/jQuery.ajax/) You can add the code for updating the list of states and cities in the success option and trigger the sending of ajax calls by binding an onchange event to the state and country dropdown. You can use .bind() (http://api.jquery.com/bind/) to do this.

Solution 2:

Snippet http://coffeestain-it.blogspot.fr/2011/08/mvc3-cascading-lists-using-ajax-and.html?m=1

Solution 3:

i have done what u need Go Here

Select Type ,Location . i did it if u need the same i will post my code you can modify it

Updated i am gona copy the code from the above site i made you modify it .i will paste code of "Type" Dropdown u can than do it for others too. one thing more its very old project so i did it through Javascript and not jQuery hope it will irritate you. :(

<td>Type</td>
<td>
      <select  id="type" onChange="propertyType(this.value)" name="type">
                            <option value="">All</option>
                            <option value="homes">Homes</option>
                            <option value="plots">Plots</option>
                            <option value="commercial">Commercial</option>
      </select>
</td>

this is js of propertyType

function propertyType(str){
  if(str=='' || str=='plots'){
    document.getElementById("type_h").innerHTML=""; 
    document.getElementById("bed").innerHTML="";    
    }   
    else if(str=='commercial'){
    document.getElementById("bed").innerHTML="";    
          }
 else{
  document.getElementById("type_h").innerHTML="<img src='<?php echo $serverimageurl?>ajax-loader-small.gif' />";
    if(window.XMLHttpRequest){
    xmlhttp=new XMLHttpRequest();
 }
 else
{
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
    xmlhttp.onreadystatechange=function()
   {
    if(xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("type_h").innerHTML=xmlhttp.responseText;
    }
   }
   xmlhttp.open("GET","ajax/propertytype.php?s="+str,true);
   xmlhttp.send();
   }
 }

This is propertytype.php

<?php
  $s=$_GET["s"];
  if($s=="homes"){
   ?>


 <select onchange="ajax_bed(this.value)" name="subtype" id="subtype" >
  <option value="">Type Of Houses</option>
  <option value="houses">Houses</option>
  <option value="flats">Flats</option>
  <option value="farmhouses">Farm Houses</option>
</select>

<?php
}
 if($s=="plots")
{
?>


 <?php
  }
  if($s=="commercial")
  {
  ?>
  <select name="subtype" id="subtype" >
   <option value="offices">Offices</option>
   <option value="shops">Shops</option>
   <option value="warehouses">Warehouses</option>
   <option value="factories">Factories</option>
   <option value="building">Buildings</option>
   <option value="other">Other</option>
  </select>
   <?php
  }
?>

This is ajax function for selecting the number of bed rooms

function ajax_bed(str){
  document.getElementById("bed").innerHTML="<img src='<?php echo $serverimageurl?>ajax-loader-small.gif' />";
  if(window.XMLHttpRequest){
    xmlhttp=new XMLHttpRequest();
   }
  else
    {
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
    xmlhttp.onreadystatechange=function()
   {
    if(xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("bed").innerHTML=xmlhttp.responseText;
    }
   }
   xmlhttp.open("GET","ajax/bedroomsselection.php?t="+str,true);
   xmlhttp.send();
 }

This is bedroomsselection.php

<?php
$t=$_GET["t"];
if($t=="houses"||$t=="flats"||$t=="farmhouses")
{
?>
 <select id="bed" name="bed">
   <option>None</option>
   <option>Single Bed</option>
   <option>Double Bed</option>
   <option>three Bed</option>
   <option>Four Bed</option>
   <option>Five Bed</option>
   <option>Six Bed</option>
   <option>Seven Bed</option>
   <option>Eight Bed</option>
   <option>Ten Bed</option>
   <option>More Than Ten Bed</option>
</select>


 <?php
 }
?>

I hope you have got the idea now its time to code it yourself Cheers