下拉选择 onchange 更新多个 div

Posted 2023-05-07

【中文标题】下拉选择 onchange 更新多个 div

【英文标题】：dropdown select onchange to update multiple divs

【发布时间】：2015-07-19 22:12:07

【问题描述】：

我有一个带有 onchange 事件的选择框，可以用另一个文件中的内容更新 a 的内容。它工作正常。 但我想做的是在我从选择框中选择某些内容时同时更新两个不同 div 中的内容。

于是我又添加了一个和第一个类似的函数，并添加到标签中的onchange中。

问题是它仍然只更新两者之一。 我究竟做错了什么 ？ 或者有没有更简单的方法可以同时使用另一个页面的信息更新两个？

主页上的脚本：

<script>
function showFirstDiv(str) 
  if (str=="") 
    document.getElementById("div1").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("div1").innerHTML=xmlhttp.responseText;
    
  
  xmlhttp.open("GET","infopage.php?info_div1="+str,true);
  xmlhttp.send();


function showSecondDiv(str) 
  if (str=="") 
    document.getElementById("div2").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("div2").innerHTML=xmlhttp.responseText;
    
  
  xmlhttp.open("GET","infopage.php?info_div2="+str,true);
  xmlhttp.send();

主页上的html

<div id="users">
  <form>
    <select name="users" onchange="showFirstDiv(this.value); showSecondDiv(this.value);">
      <option value="">Select a person:</option>
      <option value="1">Peter Griffin</option>
      <option value="2">Lois Griffin</option>
      <option value="3">Joseph Swanson</option>
      <option value="4">Glenn Quagmire</option>
    </select>
  </form>
</div>

<!-- div1 -->
<div id="div1">
  <p>info to be listed in div 1 here</p>
</div>

<!-- div2 -->
<div id="div2">
  <p>info to be listed in div 2 here</p>
</div>

infopage.php

<?php

if ($_GET[info_div1] == '1')
    
        echo 'info 1 to be showed in div 1';
    
if ($_GET[info_div1] == '2')
    
        echo 'info 2 to be showed in div 1';
    
if ($_GET[info_div1] == '3')
    
        echo 'info 3 to be showed in div 1';
    
if ($_GET[info_div1] == '4')
    
        echo 'info 4 to be showed in div 1';
    

if ($_GET[info_div2] == '1')
    
        echo 'info 1 to be showed in div 2';
    
if ($_GET[info_div2] == '2')
    
        echo 'info 2 to be showed in div 2';
    
if ($_GET[info_div2] == '3')
    
        echo 'info 3 to be showed in div 2';
    
if ($_GET[info_div2] == '4')
    
        echo 'info 4 to be showed in div 2';
    

?>

【参考方案1】：

两个函数都使用同一个全局变量xmlhttp。所以当你调用第二个函数时，它会用它的 XMLHttpRequest 对象覆盖这个变量。你应该使用一个局部变量，用var声明它。

一般来说，您应该始终将变量声明为局部变量，除非您确实需要将它们设为全局变量。

function showFirstDiv(str) 
  var xmlhttp;
  if (str=="") 
    document.getElementById("div1").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("div1").innerHTML=xmlhttp.responseText;
    
  
  xmlhttp.open("GET","infopage.php?info_div1="+str,true);
  xmlhttp.send();


function showSecondDiv(str) 
  var xmlhttp;
  if (str=="") 
    document.getElementById("div2").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("div2").innerHTML=xmlhttp.responseText;
    
  
  xmlhttp.open("GET","infopage.php?info_div2="+str,true);
  xmlhttp.send();

【讨论】：

varxmlhttp; function showSecondDiv(str) 中缺少空格

谢谢！它解决了问题！奇怪的是，他们在 w3schools 上没有那个我得到了例子w3schools.com/php/php_ajax_database.asp

我不推荐使用w3schools，他们的代码就是这样很草率。