[英]Select dropdown by ajax
我需要一些Ajax代碼來完成下拉功能。 我有三個值表:一個是國家,然后是州和城市。 我有三個下拉菜單來顯示這些值。
首先它應該顯示:
在那下拉(選擇)分別。
當我從第一個下拉列表中選擇英國時,在第二個下拉列表中必須顯示聯合王國的狀態。 同樣,當我從州下拉列表中選擇一個州時,它必須在第三個下拉列表(城市)中顯示該州的城市。
我想用ajax做到這一點。 有沒有人有執行此操作的代碼?
如果您已經熟悉jQuery,則可能需要檢查如何通過$ .ajax()( http://api.jquery.com/jQuery.ajax/ )發送ajax請求。您可以添加用於更新以下內容的代碼:成功選項中的州和城市,並通過將onchange事件綁定到州和國家/地區下拉列表來觸發ajax調用的發送。 您可以使用.bind()( http://api.jquery.com/bind/ )執行此操作。
我做了什么u需要去這里
選擇類型,位置。 我做到了,如果你需要同樣的,我會發布我的代碼,你可以修改它
更新我是戈納從上面的網站,我讓你修改它。我將粘貼“類型”下拉菜單的代碼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>
這是propertyType的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.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
}
?>
希望您現在已經有想法自己編寫代碼了
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.