如何從ajax響應中填充下拉列表？

第一個下拉列表是城市。

第二個下拉列表是基於上述選定城市的地區值。

隱藏字段將根據使用Jquery的特定區域值顯示爲開或關。

我的問題是：

在城市下拉列表中，我有平變化的AJAX功能，有助於產生區內下拉列表值。但是，選擇特定區域值時，隱藏字段不會顯示。

這裏是我的HTML表單：

<form> 
<select id='main-cat' name='maincat' onchange="sortSubcat(this.value)"/> 
<option value="">Please select one category</option> 
<option value="City 1">City 1</option> 
<option value="City 2">City 2</option> 
<option value="City 3">City 3</option> 
</select> 
<select id='subcat' name='subcat'> 
<option value=''>Please select a district</option> 
</select> 
<div id='morefield' style='display:none'> 
<input type='text' name='option1'/> 
</div> 
</form>

這裏是平變化AJAX功能：

function sortSubcat(str) 
{ 
if (str=="") 
{ 
document.getElementById("subcat").innerHTML=""; 
return; 
} 
if (window.XMLHttpRequest) 
{// code for IE7+, Firefox, Chrome, Opera, Safari 
xmlhttp=new XMLHttpRequest(); 
} 
else 
{// code for IE6, IE5 
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
} 
xmlhttp.onreadystatechange=function() 
{ 
if (xmlhttp.readyState==4 && xmlhttp.status==200) 
{ 
document.getElementById("subcat").innerHTML=xmlhttp.responseText; 
} 
} 
xmlhttp.open("GET","/member/sortsubcat.php?q="+str,true); 
xmlhttp.send(); 
}

這裏是我的jQuery代碼部分觸發隱藏字段，如果選擇特定的極限值：

$("#subcat").change(function(){ 
if ($(this).val() == 'district a'){ 
    $("#morefield").css("display","block"); 
}else{ 
    $("#morefield").hide(); 
} 
});

這裏是我的PHP文件：

<?php 
require_once("../configs/dbconnect.php"); 
if (!empty($_GET['q'])){ 
$q = basename($_GET['q']); 
$sql="SELECT * FROM subcat WHERE maincat=:q"; 
$result = $conn->prepare($sql); 
$result->bindParam(':q', $q); 
$result->execute(); 
echo "<option value=''>Please select a district</option>"; 

foreach($result as $row) 
{ 
    echo "<option value='$row[name]'>$row[name]</option>"; 
} 
} 
else{ 
echo "<option value=''>Please select a district</option>"; 
} 
$conn=null; 
?>

來源

2015-08-19 Giang Nguyen

我們可以舉一個'sortsubcat.php'文件返回的例子嗎？ – Julien

您的代碼正如您所描述的那樣工作。如果頁面上也有CSS，則可能需要查看它或檢查該區域中'option'元素的'value'屬性'select' – Deryck

@Deryck：此編碼正在工作。然而，在我選擇了一個城市之後，我看到了下拉列表中出現的廣告列表，我查看了頁面源，選項列表沒有顯示在那裏？我想，這可能是一個特定的城市價值被選中的問題，隱藏的領域會按預期顯示。但我不知道如何解決這個問題。 –

試試這個下面一行

console.log($(this).val());行後$("#subcat").change(function(){

現在，發現你越來越上改變其從裝載下拉什麼價值在控制檯中的ajax。

來源

2015-08-19 04:44:07

我打開控制檯登錄firefox（Ctrl + Shift + J）並更改城市值。但是我沒有看到控制檯日誌窗口中顯示的任何內容？ –

你能提供一個小提琴嗎？ HTML和JavaScript。 PHP不需要。現在硬編碼選項。 –

我不這麼認爲。因爲這隻適用於php文件，因爲ajax向php文件發送請求並從中獲得響應。我不知道如何暗示PHP文件在jsfiddle？ –

如何從ajax響應中填充下拉列表？

回答

相關問題