我在一个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>
我试图创建一个所有球队的下拉列表，然后当一支球队被选中时，显示他们的所有比赛和他们的详细信息。
我正在使用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>
当页面加载时，init函数运行并显示id"teamlist">
<body onload="init()">
<form name="sForm">
<div id="teamlist"></div>
</form>
</body>
我仍然需要创建一个函数来进行计算，以显示信息。
我目前的问题是，我无法让下拉列表在"团队"元素中包含超过第一个团队的内容。
第一个问题是您的计划XML文档格式不正确。开头标记为大写<Schedule>，结尾标记为小写</schedule>。这导致了XML序列化程序错误。试着将你的结束标记</Schedule>大写。此外，您还没有在这里发布HTML，所以我假设您创建的HTML文件包括一些div或其他id为"teamlist"的HTML元素。如果是这种情况，那么在修复XML标记后，假设您的web服务器上的同一目录中有所有3个文件(XML、xslt、html)，您应该能够看到下拉列表。如果您尝试在本地加载某些浏览器，它们可能会发出跨域警告。
接下来，您需要重新构造XML方案。<Team>节点应该都属于同一个父<Teams>节点。您的所有节点都属于不同的父节点。像这样重组：
<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>
然后，您需要更改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>
现在，您可以看到第一个模板与根级别"/"匹配，并将模板应用到它。这将在您的团队节点上循环，并使用第二个模板为每个节点创建选项。第三个模板匹配游戏节点，不包含输出-这将抑制在选择标记中的选项标记之后渲染额外的游戏信息。