基於onchange下拉列表中的選擇顯示XML數據

Question

我有一個XML文件，其中包含用於主隊和客隊的數據，基本上是誰是主隊，誰是客隊及其得分和比賽狀態。

我試圖使用在XSL中創建的表和select事件，然后顯示從下拉菜單中選擇的團隊的詳細信息。 在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);


    }

我試圖弄清楚是否可以在XSL中為“ onchange”調用另一個模板或在javascript中調用可以完成工作的函數。 這就是我卡住的地方。 如何在javascript中完成？

然后顯示

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

Answer 1

您對這里的技術有些困惑。 javascript“ onchange”事件無法調用XSL模板，或者XSL不能在瀏覽器中調用javascript函數。 這兩件事不能同時運行。 您正在調用使用XSLT將XML轉換為HTML的函數，但是一旦轉換完成，XSLT將不再運行。 HTML出現在瀏覽器中時，它已經消失並被遺忘。 瀏覽器將以與最初在文本編輯器中手動編寫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>

顯然，這仍然需要大量工作，但是它應該為您指明正確的方向。