选择ajax下拉列表

Question

我需要一些ajax代码来完成一些下拉功能。我有三张价值表：一张是国家，一张是州和市。我有三个下拉菜单来显示这些值。

首先它应该显示：

• 选择国家
• 选择状态
• 选择城市

在分别下降

下（选择）。

当我从第一个下拉列表中选择英国时，在第二个下拉列表中必须显示英国的状态。再次，当我从州下拉菜单中选择一个州时，它必须在第三个下拉菜单（城市）中显示该州的城市。

我想用ajax做到这一点。有没有人有这样的代码？

Answer 1

如果您已经熟悉jQuery，可能需要检查如何通过$ .ajax（）发送ajax请求（）（http://api.jquery.com/jQuery.ajax/）您可以添加用于更新成功选项中状态和城市列表的代码，并触发通过将onchange事件绑定到状态和国家下拉列表来发送ajax调用。您可以使用.bind（）（http://api.jquery.com/bind/）来执行此操作。

Answer 2

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

Answer 3

我做了什么u需要 Go Here

选择类型，位置。我做到了，如果u需要同我会后我的代码，你可以修改它

更新 我是戈纳从上面的网站，我让你修改它。我将粘贴“类型”下拉菜单的代码复制代码你也可以为别人做。 更多的是它非常古老的项目，所以我通过Javascript，而不是jQuery希望它会激怒你。 :(

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

这是属性类型

的JS

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(); 
    } 
} 

这是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 
    } 
?> 

这是选择的大床房数量AJAX功能

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(); 
} 

这是卧室选择.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 
} 
?> 

我希望你有这个想法，现在是时候自己编写它 干杯