AJAX PHP+MySQL - 选择框答案

【问题标题】：AJAX PHP+MySQL - SelectboxAJAX PHP+MySQL - 选择框
【发布时间】：2014-07-18 22:20:30
【问题描述】：

所以我有这个简单的 AJAX 示例要修改，所以当我在选择框中更改年份时，我希望它对多个 div 生效，而不仅仅是具有 ID 的那个。有什么解决办法吗？我在想 getelementsbyclassname，但它没有显示任何内容。

<html>
<head>
<script>
function showUser(str) {
  if (str=="") {
    document.getElementById("txtHint").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("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","proba.php?q="+str,true);
  xmlhttp.send();
}
</script>
</head>
<body>

<form>    
    <select name="users" onChange="showUser(this.value)">
      <option value="">Choose year:</option>
      <option value="2013">2013</option>
      <option value="2014">2014</option>    
    </select>
</form>
<br>

<div id="txtHint"><b> - </b></div>

<p>&nbsp;</p>
</body>
</html>

【问题讨论】：

标签： javascript php mysql ajax drop-down-menu

【解决方案1】：

getElementsByClassName 可以正常工作，您只需要迭代返回的项目：

<html>
<head>
<script>
function showUser(str) {
  if (str=="") {
    setContent("");
    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) {

      setContent(xmlhttp.responseText);

    }
  }
  xmlhttp.open("GET","proba.php?q="+str,true);
  xmlhttp.send();
}

function setContent(content){
    var divs = document.getElementsByClassName('txtHint');  //fixed syntax error here
    var i = divs.length;

    while(i--) {
          divs[i].innerHTML = content;
    }
}
</script>
</head>
<body>

<form>    
    <select name="users" onChange="showUser(this.value)">
      <option value="">Choose year:</option>
      <option value="2013">2013</option>
      <option value="2014">2014</option>    
    </select>
</form>
<br>

<div class="txtHint"><b> - </b></div>
<div class="txtHint"><b> - </b></div>
<div class="txtHint"><b> - </b></div>

<p>&nbsp;</p>
</body>
</html>

【讨论】：

什么都没有是什么意思？尝试添加 console.log(xmlhttp);在您的 onreadystatechange 函数顶部并使用结果更新您的答案
我的意思是，复制+粘贴您的解决方案，它不会显示任何内容。
@VaimanHunor 好的，有一个很小的语法错误，我使用了逗号而不是分号。现在已修复