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><selectid="type"onChange="propertyType(this.value)"name="type"><optionvalue="">All</option><optionvalue="homes">Homes</option><optionvalue="plots">Plots</option><optionvalue="commercial">Commercial</option></select></td>

this is js of propertyType

functionpropertyType(str){
  if(str=='' || str=='plots'){
    document.getElementById("type_h").innerHTML=""; 
    document.getElementById("bed").innerHTML="";    
    }   
    elseif(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=newXMLHttpRequest();
 }
 else
{
    xmlhttp=newActiveXObject("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"){
   ?><selectonchange="ajax_bed(this.value)"name="subtype"id="subtype" ><optionvalue="">Type Of Houses</option><optionvalue="houses">Houses</option><optionvalue="flats">Flats</option><optionvalue="farmhouses">Farm Houses</option></select><?php
}
 if($s=="plots")
{
?><?php
  }
  if($s=="commercial")
  {
  ?><selectname="subtype"id="subtype" ><optionvalue="offices">Offices</option><optionvalue="shops">Shops</option><optionvalue="warehouses">Warehouses</option><optionvalue="factories">Factories</option><optionvalue="building">Buildings</option><optionvalue="other">Other</option></select><?php
  }
?>

This is ajax function for selecting the number of bed rooms

functionajax_bed(str){
  document.getElementById("bed").innerHTML="<img src='<?php echo $serverimageurl?>ajax-loader-small.gif' />";
  if(window.XMLHttpRequest){
    xmlhttp=newXMLHttpRequest();
   }
  else
    {
    xmlhttp=newActiveXObject("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")
{
?><selectid="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