Question

我有一个我从网上下载的javascript。这非常有效。我的问题是我现在要求使用相同的脚本但在页面上的三个实例上？如何复制或编辑此javascript代码才能实现此目的。

为了给你一个背景，我有一个下拉列表，onchange调用下面的函数来填充一个没有页面刷新的mysql数据的表。该脚本显示来自另一个页面的信息，getpersonsformedical.php。

我现在有两个其他页面要使用相同的javascript在同一页面上显示。亦即 getjobsformedical.php和getrisksformedical.php。

任何帮助将不胜感激。（道歉我的javascript不是很好）。

我可以在另一个脚本标记中复制代码吗？但是如何为单个标签onclick调用多个onchange事件。必须从单个onclick中调用所有这三个页面。

我知道还有其他方法可以做到这一点，但如果我们能够采用这种方法，我们将不胜感激。

为了澄清，我需要一个onchage事件来显示三个单独的php页面（带有mysql数据），分别为三个。

以答案更新

由于破坏，完整的工作脚本是：

<script> 
function showUser(userNumber, str, target, page) {  
  if (str=="")  {  
       document.getElementById(target + userNumber).innerHTML=''; 
     return;  
    }    
    var xmlhttp=new XMLHttpRequest(); 
    xmlhttp.onreadystatechange=function()  {  
      if (xmlhttp.readyState==4 && xmlhttp.status==200)   {  
        document.getElementById(target).innerHTML = xmlhttp.responseText;  
      }  
    }  
    xmlhttp.open("GET",page+"?q="+str,true);  
    xmlhttp.send();  
  }  

    function showThreeSections(userNumber, str) { 
    showUser(userNumber, str, 'a', 'getpersonsformedical.php'); 
    showUser(userNumber, str, 'b', 'getjobsformedical.php'); 
    showUser(userNumber, str, 'c', 'getrisksformedical.php'); 
    }
</script>

输出到div：

<div align="left" id="a"><font color=gray>Person Assignment will be shown here</font></div>
<div align="left" id="b"><font color=gray>Person Jobs will be shown here</font></div>
<div align="left" id="c"><font color=gray>Person Risks will be shown here</font></div>

谢谢和问候，莱恩

Answer 1

你应该在你的HTML页面的HEAD元素中只有一次脚本，但是需要另一个参数：页面的名称。

第二个函数可以用不同的参数调用第一个函数三次。

这样的事情：

<HEAD>
 ... other things

<script>
function showUser(userNumber, str, page) { 
  if (str=="")  { 
      return; 
    }   
    var xmlhttp=new XMLHttpRequest(); 
    xmlhttp.onreadystatechange=function()  { 
      if (xmlhttp.readyState==4 && xmlhttp.status==200)   { 
        document.getElementById("txtHint" + userNumber).innerHTML += xmlhttp.responseText; 
      } 
    } 
    xmlhttp.open("GET",page+"?q="+str,true); 
    xmlhttp.send(); 
  } 

  function showThreeSections(userNumber, str) {
      document.getElementById("txtHint" + userNumber).innerHTML='';
      showUser(userNumber, str, 'getpersonsformedical.php');
      showUser(userNumber, str, 'page2.php');
      showUser(userNumber, str, 'page3.php');
  }
</script>

请注意，大功能添加到innerHTML而不是清除它。

然后你可以选择这个：

<SELECT NAME=medcondition3 id=medcondition3 onchange="showThreeSections(1, this.value)">

但是这个解决方案可能很糟糕：你应该有不同的目标div来填充而不是只有一个。很难说没有重新设计（或至少研究）整个页面。

编辑：

如果你想定位不同的div，你应该：

1）有三个div。例如

<div id=a1></div>
<div id=b1></div>
<div id=c1></div>

2）修改代码，例如：

<script>
function showUser(userNumber, str, target, page) { 
  if (str=="")  { 
       document.getElementById(target + userNumber).innerHTML='';
     return; 
    }   
    var xmlhttp=new XMLHttpRequest(); 
    xmlhttp.onreadystatechange=function()  { 
      if (xmlhttp.readyState==4 && xmlhttp.status==200)   { 
        document.getElementById(target + userNumber).innerHTML = xmlhttp.responseText; 
      } 
    } 
    xmlhttp.open("GET",page+"?q="+str,true); 
    xmlhttp.send(); 
  } 

  function showThreeSections(userNumber, str) {
      showUser(userNumber, str, 'a', 'getpersonsformedical.php');
      showUser(userNumber, str, 'b', 'page2.php');
      showUser(userNumber, str, 'c', 'page3.php');
  }
</script>

Answer 2

在xmlhttp.open制作像这样的if函数之前，

if(str == str){
    var page = "getjobsformedical.php?q="+str;
}
else{
    var page = "getrisksformedical.php?q="+str;
}

然后，

xmlhttp.open("GET",page,true);

<强>更新

if (xmlhttp.readyState==4 && xmlhttp.status==200)   {
    if(str == 'getjobsformedical.php'){
        document.getElementById("txtHint1").innerHTML += xmlhttp.responseText; 
    }
    elseif(str == 'getrisksformedical.php'){
        document.getElementById("txtHint2").innerHTML += xmlhttp.responseText; 
    }
    elseif(str == 'page3.php'){
        document.getElementById("txtHint3").innerHTML += xmlhttp.responseText; 
    }
 }

重复的javascript代码 -

2 个答案: