2

我正在尝试根据所选的选项字段显示来自数据库（MySQL）的数据。我有两个字段，如下所示：

选择一个健康块：.......（列表）
选择年份：.......（列表）

当我选择健康块和年份时，数据库中的数据应该显示在同一页面上。我试过下面的代码。实际上，如果我只有一个选项（“年份”）可供选择，则该代码有效。我需要将两个值（健康块和年份）传递到我编写代码以从数据库中检索数据的页面（getblock2.php）。有人可以帮我找出问题所在吗？

主页

<html>
<head>
<script type="text/javascript">
var str11;
var str22;

function showB(str2)
{
    str22=str2;
}

function showBlock2(str)
{
showB();
str11=str;
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  } 
if (window.XMLHttpRequest)
  {
  xmlhttp=new XMLHttpRequest();
  }
else
  {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getblock2.php?q="+str11+"&h="+str22,true);
xmlhttp.send();
}
</script>
</head>
<body>
Select a Health block
<select name="h" onChange="showB(this.value)">
<option value="1">H1</option>
<option value="2">H2</option>
</select>
<br/>
Select a year
<select name="yr" onChange="showBlock2(this.value)">
<option>2012</option>
<option>2013</option>
</select>
<div id="txtHint" style="width:570px; height:auto" >
                            </div>
</body>
</html>

getblock2.php

<?php
include("connect.php");
$q=$_GET["q"];
$h=$_GET['h'];
$q="select Total_Cases from epidemics where Year1=$q and Hid=$h";
$r=mysql_query($q);
$i=0;
while($row=mysql_fetch_row($r))
    {
    $i++;
    echo $i." ".$row[0]."<br/>";
    }
?>
4

2 回答 2

1

只需删除

showB()

它会正常工作。因为您已经在两个变量中都有值。只是showB()函数使变量再次为空。

这是优化的代码。它可以在这两种情况下工作，无论您先选择哪个选项。

<script type="text/javascript">
var healthValue = "";
var yearValue = "";

function showB(str2)
{
  healthValue = str2;

if(yearValue != '')
{
    callAjax(); 
}
}

function showBlock2(str)
{
yearValue = str;

if(healthValue != '')
{
    callAjax(); 
}
 }


 function callAjax()
 {

if (window.XMLHttpRequest)
  {
  xmlhttp=new XMLHttpRequest();
  }
else
  {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","getblock2.php?q="+healthValue+"&h="+yearValue,true);
  xmlhttp.send();
 }
 </script>
于 2013-08-19T10:06:34.557 回答
1

调用更改年份str22时未分配变量。showBlock2()所以换行

showB();

和

showB(document.getElementsByName("h")[0].value);

当您选择健康然后选择年份时，这将起作用，无需在更改健康列表时调用 showB()。

编辑（优化代码）：

以下代码已从您的源代码中更改。

主页

<html>
<head>
<script type="text/javascript">
function showBlock2()
{
    var str11=document.getElementsByName("h")[0].value;
    var str22=document.getElementsByName("yr")[0].value;
    document.getElementById("txtHint").innerHTML="";
    var xmlhttp;
    if (window.XMLHttpRequest)
    {
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
            }
        }
    xmlhttp.open("GET","getblock2.php?q="+str11+"&h="+str22,true);
    xmlhttp.send();
}
</script>
</head>
<body>
Select a Health block
<select name="h" onChange="showBlock2()">
    <option value="1">H1</option>
    <option value="2">H2</option>
</select>
<br/>
Select a year
<select name="yr" onChange="showBlock2()">
    <option>2012</option>
    <option>2013</option>
</select>
<div id="txtHint" style="width:570px; height:auto" >
</div>
</body>
</html>

请注意，仅function showBlock2()用于两个下拉列表的 onchange，因此txtHint每次更改时都会更新 div。也没有传递任何参数。

于 2013-08-19T10:04:01.233 回答