2个函数分别在onchange事件中同时运行

时间:2014-01-11 01:27:20

标签: javascript php html ajax onchange

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

因此,如果类别为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>

1 个答案:

答案 0 :(得分:2)

使用var声明所有变量。您的showSub()showSize()函数都使用未使用xmlhttp声明的变量var,这使得全局 - 所以当您致电{ {1}}它覆盖了来自showSize()的{​​{1}}对象(这就是为什么你会得到评论中提到的效果,其中“使用当前代码,只显示showize”)。

所以将这一行添加到每个函数的开头:

xmlhttp

更好的是,将if / else输出到一个返回xmlhttp对象的单独函数中,而不是在两个函数中重复该代码:

showSub()