javascript - 合并更新两个独立 DIV 的 2 个 jquery 函数

Question

我希望选择下拉框同时运行两个功能，以便在同一页面上更新两个单独的 div。

这是我的功能；

function showFAQ(str) {
  if (str=="") {
    document.getElementById("faqHint").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("faqHint").innerHTML=xmlhttp.responseText;
    }
  }
   var category = "<?php echo $category; ?>";
    var catid = "<?php echo $catid; ?>";
    var subcat = "<?php echo $subcat; ?>";
    var subcat2 = "<?php echo $subcat2; ?>";
    var subcatid= "<?php echo $subcatid; ?>";
    var fileclass= "<?php echo $fileclass; ?>";
  xmlhttp.open("GET","FaqCheck.php?q="+str+ '&catid=' + catid + '&category=' + category + '&subcat=' + subcat + '&subcat2=' + subcat2 + '&subcatid=' + subcatid + '&fileclass=' + fileclass,true);
  xmlhttp.send();
}
function showClass(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;
    }
  }
   var category = "<?php echo $category; ?>";
    var catid = "<?php echo $catid; ?>";
    var subcat = "<?php echo $subcat; ?>";
    var subcat2 = "<?php echo $subcat2; ?>";
    var subcatid= "<?php echo $subcatid; ?>";
    var fileclass= "<?php echo $fileclass; ?>";
  xmlhttp.open("GET","FileCheck.php?q="+str+ '&catid=' + catid + '&category=' + category + '&subcat=' + subcat + '&subcat2=' + subcat2 + '&subcatid=' + subcatid + '&fileclass=' + fileclass,true);
  xmlhttp.send();
}

目前我不得不使用两个下拉框来实现，但我希望它更整洁。选择代码是；1.

<select name="fileclass" onchange="showClass(this.value)" required="">
<option value="">Select</option>
<option value="create">Create</option>
<option value="modify">Modify</option>
<option value="delete">Delete</option>
</select>

2.

<select name="faq_class" onchange="showFAQ(this.value)" required="">
<option value="">Select</option>
<option value="create">Create</option>
<option value="modify">Modify</option>
<option value="delete">Delete</option>
</select>

作为引用，faq_class 和 fileclass 共享相同的值(总是!)

感谢您帮助新手:)

Answer 1

尝试在两个函数中执行以下操作。我在初始化xmlhttp变量时添加了关键字var

var xmlhttp=new XMLHttpRequest();

这是为了让变量的作用域只是它的包含函数。如果您在没有使用 var 关键字的情况下初始化变量，则该变量将附加到 window 对象并在全局范围内可见。

编辑:编辑代码以显示完整代码

function showFAQ(str) {
  if (str=="") {
    document.getElementById("faqHint").innerHTML="";
    return;
  } 
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
   //used the keyword var before initializing xmlhttp variable
   var xmlhttp=new XMLHttpRequest();
  } else { // code for IE6, IE5
   var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      document.getElementById("faqHint").innerHTML=xmlhttp.responseText;
    }
  }
   var category = "<?php echo $category; ?>";
    var catid = "<?php echo $catid; ?>";
    var subcat = "<?php echo $subcat; ?>";
    var subcat2 = "<?php echo $subcat2; ?>";
    var subcatid= "<?php echo $subcatid; ?>";
    var fileclass= "<?php echo $fileclass; ?>";
  xmlhttp.open("GET","FaqCheck.php?q="+str+ '&catid=' + catid + '&category=' + category + '&subcat=' + subcat + '&subcat2=' + subcat2 + '&subcatid=' + subcatid + '&fileclass=' + fileclass,true);
  xmlhttp.send();
}
function showClass(str) {
  if (str=="") {
    document.getElementById("txtHint").innerHTML="";
    return;
  } 
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    //used the keyword var before initializing xmlhttp variable
    var xmlhttp=new XMLHttpRequest();
  } else { // code for IE6, IE5
    var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
   var category = "<?php echo $category; ?>";
    var catid = "<?php echo $catid; ?>";
    var subcat = "<?php echo $subcat; ?>";
    var subcat2 = "<?php echo $subcat2; ?>";
    var subcatid= "<?php echo $subcatid; ?>";
    var fileclass= "<?php echo $fileclass; ?>";
  xmlhttp.open("GET","FileCheck.php?q="+str+ '&catid=' + catid + '&category=' + category + '&subcat=' + subcat + '&subcat2=' + subcat2 + '&subcatid=' + subcatid + '&fileclass=' + fileclass,true);
  xmlhttp.send();
}

现在您可以在一个下拉列表的 onchange 事件中调用这两个函数，如下所示:

onchange="showClass(this.value); showFAQ(this.value);"