javascript - 2个功能onchange事件分别同时

因此，我要寻找的是一种通过第一个选项触发2个功能事件onchange的方法，我在其他站点上查找了一些示例，但它们都不起作用。但是我想要的是当选择this.value时，该函数通过选择打开2个单独的选项。

因此，如果category是Dogs，则它同时执行showSub(Dogs)和showSize(Dogs)并发送到2个不同的php页面调用，如果可能的话。

//index.php

<select name="category" onChange="showSub(this.value);showSize(this.value)" style="width:200px;">
<option value="">Select Category</option>
Send to php to get actual options.
</select>

//foo.js

function showSub(str)
{
    if (str=="") {
      document.getElementById("txtSub").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("txtSub").innerHTML=xmlhttp.responseText;
      }
    }
    xmlhttp.open("GET","getSub.php?q="+str,true);
    xmlhttp.send();
}
function showSize(str)
{
    if (str=="") {
      document.getElementById("txtSize").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("txtSize").innerHTML=xmlhttp.responseText;
      }
    }
    xmlhttp.open("GET","getSize.php?q="+str,true);
    xmlhttp.send();
}

//其余的index.php

<div id="txtSub"></div>
<div id="txtSize"></div>

最佳答案

使用var声明所有变量。您的showSub()和showSize()函数都使用未用xmlhttp声明的变量var，这使它成为全局变量-因此，当您调用showSize()时，它将覆盖xmlhttp中的showSub()对象（这就是为什么您获得注释中提到的效果的原因，其中“使用当前代码，showsize仅显示”。

因此，将此行添加到每个函数的开头：

var xmlhttp;

更好的是，将if / else移到一个返回xmlhttp对象的单独函数中，而不要在两个函数中都重复该代码：

function getXMLHttp() {
    return window.XMLHttpRequest ? new XMLHttpRequest()            // newer browsers
                                 : new ActiveXObject("Microsoft.XMLHTTP"); // old IE
}

// and then within your other functions:
var xmlhttp = getXMLHttp();