根据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响应更改下拉值

回答

相关问题