ajax下拉菜單（國家，州，市）

-7

我需要一些AJAX代碼來執行一些功能，並下拉菜單。ajax下拉菜單（國家，州，市）

我有三個值表一個國家，然後州和城市。

而且我有三個下拉菜單，以顯示這些值

首先它應該顯示

選擇國家

選擇狀態

選擇城市

在下拉列表

（slect）分別。

當我選擇美國從第二個下拉第一個下拉

下它必須顯示美國的狀態。

，並當我再次從狀態下拉

選擇一個狀態時，它必須表明國家在第三下拉列表（市）

我想與Ajax來做到這一點的城市。

任何人都可以有一個代碼來做到這一點。

請幫幫我。

感謝

來源

2010-02-26 tibin mathew

可能重複http://stackoverflow.com/questions/ 8529129 /開源國家地區選擇器在js） – Thilo 2012-03-12 07:49:17

確切副本的http://stackoverflow.com/questions/11681854/select-dropdown-by-ajax/11682044#11682044 – 2012-07-27 20:03:47

1）在分貝創建3個表

country table 
============== 
countryId || countryName 

stateTable 
============= 
stateId || stateName || countryName 

city table 
============= 
cityId || cityName || stateId

2）現在創建3個web服務，它發送數據JSON格式

3）現在 html頁面上創建三個選擇框和結合onchange事件在每個選擇框（城市選擇除外）中，該事件將爲getStates Webservcie發送countryId，爲getCities webservice發送stateId。並在狀態選擇框和城市選擇框中綁定接收的json狀態

來源

2010-02-26 12:10:15

嘿，這我知道，但我不知道這個 – 2010-02-27 09:42:13

的ajax函數方法做一些搜索xmlhttprequest – 2010-02-27 10:16:03

可以以多種方式來完成...

第一個下拉菜單中添加一個變化事件;

那麼，你打算如何檢索與第一個菜單相關的狀態，以及與第二個菜單相關的城市？

它們是否在數據庫中？或者在一個js數組（json？）？

如果它們在數據庫中，請使用ajax請求..否則，請使用該數組。

有這麼多的插件和HOWTO對此的胎面，google了一下

編輯：誰也刪除plz-send-me-teh-code標籤？

來源

2010-02-26 11:40:04 Strae

這是一個非常古老的項目，所以我通過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(); 
}

這個數是bedroomsselection.ph p

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

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

[開源國家地區選擇在JS（的

來源

2012-07-27 20:02:41

ajax下拉菜單（國家，州，市）

回答

相關問題