duandi4815
2014-01-11 01:27
浏览 154

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

So what i'm looking for is a way to trigger 2 function events onchange with my first option, i've looked up a few examples on other sites an neither of them works. But what i want is when this.value is selected, for the function to open 2 separate options via the selection.

So if category is Dogs it does showSub(Dogs) and showSize(Dogs) at the same time and sends to 2 different php page calls, IF thats possible.

//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();
}

//rest of index.php

<div id="txtSub"></div>
<div id="txtSize"></div>
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • doumi7861 2014-01-11 01:40
    已采纳

    Use var to declare all variables. Your showSub() and showSize() functions both use a variable xmlhttp that is not declared with var, which makes it global - so when you call showSize() it overwrites the xmlhttp object from showSub() (which is why you get the effect mentioned in a comment where "with the current code, the showsize only shows").

    So add this line to the start of each function:

    var xmlhttp;
    

    And better yet, move the if/else out into a separate function that returns an xmlhttp object rather than repeating that code in both functions:

    function getXMLHttp() {
        return window.XMLHttpRequest ? new XMLHttpRequest()            // newer browsers
                                     : new ActiveXObject("Microsoft.XMLHTTP"); // old IE
    }
    
    // and then within your other functions:
    var xmlhttp = getXMLHttp();
    
    已采纳该答案
    打赏 评论

相关推荐 更多相似问题