Javascript 从下拉列表中选择球队后尝试显示比赛信息

我有一个XML文件中的团队和游戏的数据值，该文件具有以下结构

<Schedule xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
   <Teams>
          <Team>Sandlot</Team>
          <Team>Rangers</Team>
          <Team>little guys</Team>
   </Teams>
   <Game status="Played">
          <Home_Team>Sandlot</Home_Team>
          <Away_Team>Rangers</Away_Team>
          <Date>2014-01-10</Date>
          <Home_Team_Score>7</Home_Team_Score>
          <Away_Team_Score>9</Away_Team_Score>
      </Game>
  </schedule>

沙地
流浪者
小家伙
沙地
流浪者
2014-01-10
7.
9

我试图创建一个所有球队的下拉列表，然后当一个球队被选中时，显示他们所有的比赛和他们的详细信息

我正在使用javascript加载样式表，如下所示

<?xml version="1.0" encoding="UTF-8" ?>

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output method="html" version="4.0" omit-xml-declaration="yes" />

<xsl:template match="/Schedule">
    <table class="listing">
        <tr><th>Team</th>
            <td><select name="Team" class="listing" id="teamlist">
                <!--<xsl:apply-templates select="team" /> -->
                <xsl:for-each select="Teams">
                    <option>
                        <xsl:value-of select="Team" />
                    </option>
                </xsl:for-each>
            </select>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <input type="button" value="Submit Team" onclick="displayGames()" />
            </td>
        </tr>
    </table>
</xsl:template>
 </xsl:stylesheet>

团队

下面是我用来尝试在页面上显示它的javascript

<script type="text/javascript">


    var teamL="teamlist.xsl";

    function loadXMLDoc(filename) {
        xhttp = new XMLHttpRequest();
        xhttp.open("GET", filename, false);
        xhttp.send();
        return xhttp.responseXML;
    }

    var xmlDoc=loadXMLDoc(xmlFile);
    var xsltTeamDoc=loadXMLDoc(teamListFile);


    function createXDoc(xFile, PID)
    {
            xDoc=loadXMLDoc(xFile);
            return xDoc;
    }  

    function runTransform(xDoc, xsltDoc) {

            var xProcessor = new XSLTProcessor();  
            xProcessor.importStylesheet(xsltDoc);
            var resultDoc = xProcessor.transformToDocument(xDoc);   
            var serializer = new XMLSerializer();
            var resultStr = serializer.serializeToString(resultDoc);
            return resultStr;
    }
    function init()
    {
        var teamListElem=document.getElementById("teamlist");
        teamListElem.innerHTML=runTransform(xmlDoc,xsltTeamDoc);
    }
</script>

var teamL=“teamlist.xsl”；
函数loadXMLDoc（文件名）{
xhttp=newXMLHttpRequest（）；
xhttp.open（“GET”，filename，false）；
xhttp.send（）；
返回xhttp.responseXML；
}
var xmlDoc=loadXMLDoc（xmlFile）；
var xsltTeamDoc=loadXMLDoc（teamListFile）；
函数createXDoc（xFile，PID）
{
xDoc=loadXMLDoc（xFile）；
返回xDoc；
}  
函数runTransform（xDoc、xsltDoc）{
var xProcessor=new XSLTProcessor（）；
xProcessor.importStylesheet（xsltDoc）；
var resultDoc=xProcessor.transformToDocument（xDoc）；
var serializer=新的XMLSerializer（）；
var resultStr=serializer.serializeToString（resultDoc）；
返回结果TR；
}
函数init（）
{
var teamListElem=document.getElementById（“团队列表”）；
teamListElem.innerHTML=runTransform（xmlDoc，xsltTeamDoc）；
}

加载页面时，init函数运行并显示id“teamlist”

我还需要创建一个函数来进行计算以显示信息

---

我当前的问题是，在“team”元素中，我无法使下拉列表中包含的团队数超过第一个团队。

第一个问题是您的计划XML文档格式不正确。开头标记为大写

，结尾标记为小写

。这将导致XML序列化程序错误。尝试将结束标记大写

。另外，您还没有在这里发布HTML，因此我假设您创建的HTML文件包含一些div或其他id为“teamlist”的HTML元素。如果是这种情况，那么在修复XML标记后，假设web服务器上的同一目录中有所有3个文件（XML、xslt、html），您应该能够看到下拉列表。如果您试图在本地加载某些浏览器，它们可能会发出跨域警告

接下来，您需要重新构造XML方案。

节点都应属于同一父节点。您的所有节点都属于不同的父节点。重组如下：

    <Schedule xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
   <Teams>
        <Team>Sandlot</Team>
        <Team>Rangers</Team>
        <Team>little guys</Team>
    </Teams>
   <Game status="Played">
      <Home_Team>Sandlot</Home_Team>
      <Away_Team>Rangers</Away_Team>
      <Date>2014-01-10</Date>
      <Home_Team_Score>7</Home_Team_Score>
      <Away_Team_Score>9</Away_Team_Score>
  </Game>
</Schedule>

沙地
流浪者
小家伙
沙地
流浪者
2014-01-10
7.
9

然后，您需要更改XSLT模板。以下是我所拥有的：

<?xml version="1.0" encoding="UTF-8" ?>

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output method="html" version="4.0" omit-xml-declaration="yes" />

    <xsl:template match="/">
        <table class="listing">
            <tr><th>Team</th>
                <td><select name="teamlist" class="listing" id="teamlist">
                    <xsl:apply-templates />
                </select>
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="button" value="Submit Team" onclick="display()" />
                </td>
            </tr>
        </table>
    </xsl:template>

    <xsl:template match="Team">
        <option>
            <xsl:value-of select="." />
        </option>
    </xsl:template>

    <xsl:template match="Game">

    </xsl:template>
</xsl:stylesheet>

团队

---

现在您可以看到第一个模板与根级别“/”匹配，并将模板应用于它。这将在团队节点上循环，并使用第二个模板为每个节点创建选项。第三个模板匹配游戏节点，不包含任何输出-这将禁止在选择标记中的选项标记之后呈现额外的游戏信息。

我确实将结束标记大写，我只是在这里键入时输入错误。这是我在上面添加的html中的正文，它现在显示下拉列表，但它是空的。我有正在显示的信息，但不在下拉框中。它显示在下面，下拉框仍然为空。这是基于我对teamlist.xsl样式表的更改和对XML数据文件中元素的引用。由于提供了额外的信息，我能够使用上面的更改显示下拉列表，但试图合并您的更改，它再次在我身上消失。您如何应用模板/时间表/团队？这是XSLT中的标准吗？该模板未定义。是否只是查看下面的元素？请在for each中尝试选择=“/Teams/Team”，然后在xsl:value of中选择=“.”。这应该会让团队重新出现。关于/Schedule/Teams问题-可以安全地删除匹配属性。太棒了，是的，它现在以某种方式填充了游戏信息：）

<?xml version="1.0" encoding="UTF-8" ?>

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output method="html" version="4.0" omit-xml-declaration="yes" />

    <xsl:template match="/">
        <table class="listing">
            <tr><th>Team</th>
                <td><select name="teamlist" class="listing" id="teamlist">
                    <xsl:apply-templates />
                </select>
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="button" value="Submit Team" onclick="display()" />
                </td>
            </tr>
        </table>
    </xsl:template>

    <xsl:template match="Team">
        <option>
            <xsl:value-of select="." />
        </option>
    </xsl:template>

    <xsl:template match="Game">

    </xsl:template>
</xsl:stylesheet>