根據AJAX響應更改下拉值

我對AJAX不太熟練，但我認爲這應該起作用。它應該做的是用戶從下拉列表中選擇一個名稱，而另一個下拉列表（使用PHP從MySQL數據庫填充）自動選擇關聯的對象。因此，讓我們說你有：根據AJAX響應更改下拉值

名稱：蘇西/邁克爾/卡倫

最喜歡的水果：蘋果/橙/芒果/番石榴

選擇蘇西，它會自動選擇「橙色」，因爲這是她的最愛在數據庫中結果。

我已經得到了Ajax代碼，將下拉菜單改爲關聯的「水果」。

<script type="text/javascript"> 
function getAff(str) 
{ 
if (str=="NULL" || str=="") 
    { 
    document.getElementById("fruit").value=""; 
    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) 
    { 
    alert(xmlhttp.responseText); 

var indexVal = document.getElementById("fruit").length; 
    for(x=0; x<indexVal;x++) { 
    if (document.getElementById("fruit").options[x].value == xmlhttp.responseText) { 
    document.getElementById("fruit").selectedIndex = x; 
    //alert(xmlhttp.responseText); 
    } 
    } 
    } 
    } 
xmlhttp.open("GET","getaff.php?q="+str,true); 
xmlhttp.send(); 
} 
</script>

我已經通過警報確認它拉動了正確的值，儘管我已經評論過這裏。

一個問題是，下拉框不會改變。我不知道這是因爲它是通過PHP生成的？不過，它不應該是。每個下拉選擇的值是從數據庫中提取的水果的名稱。我也提醒自己indexvalue的數量，看看它是否讀取下拉，我得到正確的數字。但是沒有改變下拉。有什麼想法嗎？謝謝！

來源

2011-02-01 Sara

它是一個警察，所以我會發布它作爲評論，而不是一個答案。如果你使用jQuery，你的生活將會變得如此簡單。 – profitphp 2011-02-01 04:53:37

嘗試在<選項>標籤設置選擇的值，而不是<選擇>，並從響應修剪空白：

if (document.getElementById("fruit").options[x].value == xmlhttp.responseText.trim()) { 
    document.getElementById("fruit").options[x].selected = "selected"; 
}

來源

2011-02-01 04:54:31

謝謝！那就是訣竅。我很感激！下一次，雖然我想我會研究jQuery;） – Sara 2011-02-01 21:16:17

有幾件事情嘗試：

您比較值，或innerHTML？
您是否確定價值（或innerHTML）與您的迴應相匹配？

來源

2011-02-01 04:53:43 Ben

我不是很精通AJAX但所有帳戶，我認爲這應該是工作

如果您對javascript不熟悉，我認爲您不應該寫作普通的javascript（很難）。使用一個像jquery這樣的框架非常受歡迎，它使這些平凡的任務變得簡單易行。

什麼它應該做的是用戶從下拉列表中選擇一個名字，並另一個下拉菜單（從 MySQL數據庫和PHP填充）自動選擇關聯的對象。

你應該看看以下幾個部分：

How Jquery works：讓你開始。
s elect()：將事件處理程序綁定到「選擇」JavaScript事件，或在元素上觸發該事件。
.load：：從服務器加載數據並將返回的HTML放入匹配的元素中。
Jquery.get/jQuery.getJSON()：使用HTTP GET請求從服務器加載數據/使用GET HTTP請求從服務器加載JSON編碼的數據。
Jquery.post：使用HTTP POST請求從服務器加載數據。

當您閱讀/瀏覽這些部分時，您應該可以毫不費力地寫出這些內容（再加上更多感謝令人難以置信的John Resig）。

來源

2011-02-01 05:02:15 Alfred

根據AJAX響應更改下拉值

回答

相關問題