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

时间:2014-07-10 13:42:23

标签: javascript php jquery onchange

我希望选择下拉框同时运行两个函数,以便在同一页面上更新两个单独的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共享相同的值(总是!)

感谢您帮助新手:)

1 个答案:

答案 0 :(得分:2)

尝试在两个功能中执行以下操作。我在初始化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);"