2

選択したオプション フィールドに基づいて、データベース (MySQL) からデータを表示しようとしています。以下に示すように、2つのフィールドがあります。

ヘルスブロックを選択: .......(リスト) 年
を選択: .......(リスト)

健康ブロックと年を選択すると、データベースからのデータが同じページ自体に表示されます。次のコードを試しました。実際には、選択するオプション (「年」) が 1 つだけの場合、コードは機能します。必要なのは、データベースからデータを取得するコードを記述したページ (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 に答える