根据从下拉列表中选择的内容显示XML数据

Question

我有一个XML文件，其中包含主队和主队的数据，谁是客场球队，他们的得分以及比赛的状态。

我想使用在XSL中创建的表和选择事件，然后显示从下拉菜单中选择的团队的细节。 IE如果你选择了蓝鸟队，那么它将在他们的时间表上显示5场比赛，并且如果他们已经玩或不玩。

的XML文件结构

<ROOT> 
     <TEAMS> 
      <team> 
     </TEAMS> 

     <GAME> 
      <home> 
      <away> 
      <home_score> 
      <away_score> 
     </GAME> 
</ROOT> 

在我的XSL文件

我有以下

<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="/ROOT"> 
    <table class="listing"> 
     <tr>select the team and press the Submit Team button</tr> 
     <tr><th>Team</th> 
      <td><select name="Team" class="listing" id="list" onchange=<xsl:apply-templates select="team" /> 
       <xsl:for-each select="TEAMS/team"> 
        <option> 
         <xsl:value-of select="." /> 
        </option> 
       </xsl:for-each> 
      </select> 
      </td> 
     </tr> 

    </table> 
</xsl:template> 
     <xsl:template match="team"> 
    <select> 
      <xsl:value-of select="Team" /> 
    </select> 
</xsl:template> 
    </xsl:stylesheet> 

然后在HTML文件我加载在其主体是init（）函数。

function init() 
    { 
     var listElem=document.getElementById("list"); 
     listElem.innerHTML=runTransform(xmlDoc,xsltTeamDoc); 


    } 

我试图找出如果我可以呼吁“的onchange”另一个模板的XSL或调用的JavaScript函数，可以做的工作。这是我卡住的地方。这将如何在JavaScript中完成？

然后显示

<form name="sForm"> 
    <div id="list"></div> 
</form> 

Answer 1

你变得有点混了这里的技术。 javascript“onchange”事件不可能调用XSL模板，或者XSL在浏览器中调用JavaScript函数。这两件事情不会同时运行。您正在调用一个函数来使用XSLT将XML转换为HTML，但是一旦完成该转换，XSLT就不再运行。当HTML出现在浏览器中时，它就消失了。浏览器将以与原本在文本编辑器中手动编写的方式相同的方式处理HTML。

现在，你可以做的是写出团队信息在单独的div标签，这将被隐藏使用CSS样式。所以，他们会在页面上，但不可见。然后，“onchange”事件只会根据所选团队将这些div标签显示出来。

所以，通过创建一个模板匹配团队在那里你将输出的游戏，你的愿望

<xsl:template match="Team"> 
    <div id="team-{.}" style="display:none"> 
      <xsl:apply-templates select="//GAME[home=current()]" /> 
    </div> 
</xsl:template> 

注意如何DIV是基于团队名称唯一标识给出一个id开始它。

然后，在创建表元素的现有代码之后，您可以调用此模板来渲染所有团队的所有div。

<xsl:apply-templates select="TEAMS/Team" /> 

于是， “的onchange” 事件为您选择也只是由JavaScript来显示相关DIV

<select name="Team" class="listing" id="list" 
     onchange="document.getElementById('team-' + this.value).style.display='block'"> 

理想情况下，你会在这里使用jQuery，但这种纯粹展示原则。

试试这个XSLT

<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="/ROOT"> 
    <table class="listing"> 
     <tr>select the team and press the Submit Team button</tr> 
     <tr><th>Team</th> 
      <td><select name="Team" class="listing" id="list" onchange="document.getElementById('team-' + this.value).style.display='block'"> 
       <option>Choose Team</option> 
       <xsl:for-each select="TEAMS/Team"> 
        <option value="{.}"> 
         <xsl:value-of select="." /> 
        </option> 
       </xsl:for-each> 
      </select> 
      </td> 
     </tr> 
    </table> 
    <xsl:apply-templates select="TEAMS/Team" /> 
    </xsl:template> 

    <xsl:template match="Team"> 
     <div id="team-{.}" style="display:none"> 
      <xsl:apply-templates select="//GAME[home=current()]" /> 
     </div> 
    </xsl:template> 

    <xsl:template match="GAME"> 
     Date:<xsl:value-of select="Date" /> 
    </xsl:template> 
</xsl:stylesheet> 

这显然还需要大量的工作，但它应该指向你在正确的方向。