1

Hi I am trying to create a dropdown list that has the abilty to show a list of XML files and will allow the user to click on their names and display the XML in a table below the list. I've been trying for the last week and keep hitting brick walls and getting very confused can someone please help me? The closes i've gotten is using a pair of buttons to display the XML in a table below.

*edit

The XML files are in the same directory as the HTML file. I am trying to have the drop-down list box and table populated using Ajax and the Server/Client Ajax interactions using JSON to exchange data.

The only thing I have managed to write because I am really bad at this at the moment is this:

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 回答