根据 AJAX 响应更改下拉值答案

【问题标题】：Changing dropdown value based on AJAX Response根据 AJAX 响应更改下拉值
【发布时间】：2011-02-01 04:47:35
【问题描述】：

我对 AJAX 不是很精通，但从各方面来说，我认为这应该可行。它应该做的是用户从下拉列表中选择一个名称，另一个下拉列表（使用 PHP 从 mysql 数据库填充）自动选择关联的对象。所以假设你有：

姓名：苏西/迈克尔/凯伦

最喜欢的水果：苹果/橙子/芒果/番石榴

选择 Susie，它会自动选择“Orange”，因为这是她在数据库中最喜欢的水果。

我有这段代码让 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 的数量，看看它是否正在读取下拉列表，并且我得到了正确的数字。但是下拉菜单没有变化。有什么想法吗？谢谢！

【问题讨论】：

这是一个警察，所以我将它作为评论而不是答案发布。如果你改用 jQuery，你的生活会轻松很多。

标签： php javascript mysql ajax

【解决方案1】：

我对 AJAX 不是很精通，但是无论如何，我认为这应该是工作

如果您不熟悉 javascript，我认为您不应该编写普通的 javascript（很难）。使用像 jquery 这样的框架，它非常流行，让这些平凡的任务变得容易。

它应该做的是用户从下拉列表中选择一个名称，然后另一个下拉列表（从 mysql 数据库与 PHP) 自动选择关联的对象。

你应该看看以下部分：

How Jquery works: 让你开始。
select()：将事件处理程序绑定到“选择”JavaScript 事件，或在元素上触发该事件。
.load: : 从服务器加载数据并将返回的 HTML 放入匹配的元素中。
Jquery.get/jQuery.getJSON()：使用 HTTP GET 请求从服务器加载数据/使用 GET HTTP 请求从服务器加载 JSON 编码的数据。
Jquery.post：使用 HTTP POST 请求从服务器加载数据。

当您阅读/浏览这些部分时，您应该能够毫不费力地写出来（还要感谢令人难以置信的 John Resig）。

【讨论】：

【解决方案2】：

尝试在

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

【讨论】：

谢谢！那成功了。我很感激！下一次虽然我想我会研究 jQuery ;)

【解决方案3】：

有几件事可以尝试：

你是比较值还是innerHTML？
您确定该值（或innerHTML）与您的回复相符吗？

【讨论】：