javascript - AJAX PHP+MySQL - 选择框

标签 javascript php mysql ajax drop-down-menu

所以我有一个我想要修改的简单AJAX示例,所以当我更改选择框中的年份时,我希望它对多个div生效,而不仅仅是具有ID的div。有什么解决办法吗?我正在考虑 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>

最佳答案

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>

关于javascript - AJAX PHP+MySQL - 选择框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23932867/

相关文章:

javascript - 使用 PHP 从完整图像路径获取图像名称

php - 启用 jquery slideToggle() 用于一段时间内的多个输出

php - 为什么我的表单向我发送的数据添加选项卡?

php - 在数据不可用时显示年度报告(CI、PHP、MySQL)

sql - 根据条件选择 MAX() 的更简单方法?

javascript - jQuery 选择菜单更改功能在 iPhone 上不起作用

javascript - 从 g-recaptcha 标签获取 reCAPTCHA v2 的 widgetId?

javascript - JavaScript 中的对象是按引用还是按值传递的?

php - SQL 注入(inject)同时允许 iFrame

python - 使用 Python3 多处理时,是否有正确的 peewee 设置以避免 mysql 同步问题?