選擇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 
} 
?> 

我希望你有這個想法，現在是時候自己編寫它 乾杯