1

こんにちは、XML ファイルのリストを表示する機能を備えたドロップダウン リストを作成しようとしています。ユーザーは名前をクリックして、リストの下の表に XML を表示できます。私は先週頑張ってきましたが、レンガの壁にぶつかり続け、非常に混乱しています。誰か助けてもらえますか? 私が得たクローズは、下の表に XML を表示するためにボタンのペアを使用しています。

*編集

XML ファイルは、HTML ファイルと同じディレクトリにあります。Ajax を使用してドロップダウン リスト ボックスとテーブルにデータを入力し、JSON を使用してデータを交換するサーバー/クライアント Ajax インタラクションを作成しようとしています。

現時点でこれが本当に苦手なので、何とか書けたのはこれだけです：

HTML

<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(url)
{
var xmlhttp;
var txt,x,xx,i;
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)
    {
    txt="<table border='1'><tr><th>City</th><th>Team</th></tr>";
    x=xmlhttp.responseXML.documentElement.getElementsByTagName("team");
    for (i=0;i<x.length;i++)
      {
      txt=txt + "<tr>";
      xx=x[i].getElementsByTagName("city");
        {
        try
          {
          txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
          }
        catch (er)
          {
          txt=txt + "<td> </td>";
          }
        }
      xx=x[i].getElementsByTagName("name");
        {
        try
          {
          txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
          }
        catch (er)
          {
          txt=txt + "<td> </td>";
          }
        }
      txt=txt + "</tr>";
      }
    txt=txt + "</table>";
    document.getElementById('teamInfo').innerHTML=txt;
    }
  }
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
</script>
</head>
<body>

<div id="teamInfo">
<button onclick="loadXMLDoc('econ.xml')">Eastern Conference</button>
<button onclick="loadXMLDoc('westernCon.xml')">Western Conference</button>
<br>

</div>

</body>
</html>
4

1 に答える 1

0

ボタンが機能するようになった場合は、選択を使用して、値が変更されたときに JS 関数を起動するように変換するだけです。

<select onChange="loadXMLDoc(this.value)">
    <option value="null.xml">Please Select</option>
    <option value="econ.xml">Eastern Conference</option>
    <option value="westernCon.xml">Western Conference</option>
</select>

私の例では、loadXMLDoc 関数に検出を追加して、url == "null.xml" かどうかを判断し、その場合はテーブルにデータを入力する代わりにテーブルをクリアすることに注意してください...または、空のテキスト ファイルと名前を追加するだけです。 null.xml です。

于 2013-02-01T01:26:02.377 に答える