dropdown select onchange 更新多个div
dropdown select onchange to update multiple divs
我有一个带有 onchange 事件的 selectbox,用于使用另一个文件的内容更新 a 的内容。它工作正常。
但是我想做的是当我 select 从我的 select 盒子里 select 东西时,同时更新两个不同 div 中的内容。
于是我又添加了一个和第一个类似的函数,并添加到标签中的onchange中。
问题是它仍然只更新两者之一。
我究竟做错了什么 ?
或者有没有更简单的方法来同时更新两个页面的信息?
主页上的脚本:
<script>
function showFirstDiv(str) {
if (str=="") {
document.getElementById("div1").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("div1").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","infopage.php?info_div1="+str,true);
xmlhttp.send();
}
function showSecondDiv(str) {
if (str=="") {
document.getElementById("div2").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("div2").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","infopage.php?info_div2="+str,true);
xmlhttp.send();
}
html 在主页上
<div id="users">
<form>
<select name="users" onchange="showFirstDiv(this.value); showSecondDiv(this.value);">
<option value="">Select a person:</option>
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Joseph Swanson</option>
<option value="4">Glenn Quagmire</option>
</select>
</form>
</div>
<!-- div1 -->
<div id="div1">
<p>info to be listed in div 1 here</p>
</div>
<!-- div2 -->
<div id="div2">
<p>info to be listed in div 2 here</p>
</div>
infopage.php
<?php
if ($_GET[info_div1] == '1')
{
echo 'info 1 to be showed in div 1';
}
if ($_GET[info_div1] == '2')
{
echo 'info 2 to be showed in div 1';
}
if ($_GET[info_div1] == '3')
{
echo 'info 3 to be showed in div 1';
}
if ($_GET[info_div1] == '4')
{
echo 'info 4 to be showed in div 1';
}
if ($_GET[info_div2] == '1')
{
echo 'info 1 to be showed in div 2';
}
if ($_GET[info_div2] == '2')
{
echo 'info 2 to be showed in div 2';
}
if ($_GET[info_div2] == '3')
{
echo 'info 3 to be showed in div 2';
}
if ($_GET[info_div2] == '4')
{
echo 'info 4 to be showed in div 2';
}
?>
两个函数都使用相同的全局变量xmlhttp
。因此,当您调用第二个函数时,它会用它的 XMLHttpRequest 对象覆盖这个变量。您应该通过使用 var
.
声明来使用局部变量
一般来说,您应该始终将变量声明为局部变量,除非您确实需要它们是全局变量。
function showFirstDiv(str) {
var xmlhttp;
if (str=="") {
document.getElementById("div1").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("div1").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","infopage.php?info_div1="+str,true);
xmlhttp.send();
}
function showSecondDiv(str) {
var xmlhttp;
if (str=="") {
document.getElementById("div2").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("div2").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","infopage.php?info_div2="+str,true);
xmlhttp.send();
}
我有一个带有 onchange 事件的 selectbox,用于使用另一个文件的内容更新 a 的内容。它工作正常。 但是我想做的是当我 select 从我的 select 盒子里 select 东西时,同时更新两个不同 div 中的内容。
于是我又添加了一个和第一个类似的函数,并添加到标签中的onchange中。
问题是它仍然只更新两者之一。 我究竟做错了什么 ? 或者有没有更简单的方法来同时更新两个页面的信息?
主页上的脚本:
<script>
function showFirstDiv(str) {
if (str=="") {
document.getElementById("div1").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("div1").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","infopage.php?info_div1="+str,true);
xmlhttp.send();
}
function showSecondDiv(str) {
if (str=="") {
document.getElementById("div2").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("div2").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","infopage.php?info_div2="+str,true);
xmlhttp.send();
}
html 在主页上
<div id="users">
<form>
<select name="users" onchange="showFirstDiv(this.value); showSecondDiv(this.value);">
<option value="">Select a person:</option>
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Joseph Swanson</option>
<option value="4">Glenn Quagmire</option>
</select>
</form>
</div>
<!-- div1 -->
<div id="div1">
<p>info to be listed in div 1 here</p>
</div>
<!-- div2 -->
<div id="div2">
<p>info to be listed in div 2 here</p>
</div>
infopage.php
<?php
if ($_GET[info_div1] == '1')
{
echo 'info 1 to be showed in div 1';
}
if ($_GET[info_div1] == '2')
{
echo 'info 2 to be showed in div 1';
}
if ($_GET[info_div1] == '3')
{
echo 'info 3 to be showed in div 1';
}
if ($_GET[info_div1] == '4')
{
echo 'info 4 to be showed in div 1';
}
if ($_GET[info_div2] == '1')
{
echo 'info 1 to be showed in div 2';
}
if ($_GET[info_div2] == '2')
{
echo 'info 2 to be showed in div 2';
}
if ($_GET[info_div2] == '3')
{
echo 'info 3 to be showed in div 2';
}
if ($_GET[info_div2] == '4')
{
echo 'info 4 to be showed in div 2';
}
?>
两个函数都使用相同的全局变量xmlhttp
。因此,当您调用第二个函数时,它会用它的 XMLHttpRequest 对象覆盖这个变量。您应该通过使用 var
.
一般来说,您应该始终将变量声明为局部变量,除非您确实需要它们是全局变量。
function showFirstDiv(str) {
var xmlhttp;
if (str=="") {
document.getElementById("div1").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("div1").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","infopage.php?info_div1="+str,true);
xmlhttp.send();
}
function showSecondDiv(str) {
var xmlhttp;
if (str=="") {
document.getElementById("div2").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("div2").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","infopage.php?info_div2="+str,true);
xmlhttp.send();
}