XSL：使用动态选择列表生成过滤列表答案

【问题标题】：XSL: Using a dynamic select list to generate a filtered listXSL：使用动态选择列表生成过滤列表
【发布时间】：2012-05-19 22:29:14
【问题描述】：

我有一个包含姓名和电话号码以及与之关联的城市（可能是多个城市）的 XML 文件。我想要做的是生成一个唯一的城市列表，然后让用户选择其中一个城市。当他们这样做时，将显示与该城市关联的所有名称的列表。

我可以生成唯一的城市列表。我可以生成与硬编码城市相关的名称。选择城市时，我可以使姓名/电话列表可见或不可见。我不能做的是弄清楚如何使用选择列表“选定”值来过滤名称。我意识到这可能是微不足道的，但请善待新手并告诉我它是如何完成的！

这是我的代码：

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">

<html>
<head>

  <script type="text/javascript">
    var showList = function() {
    document.getElementById("swarms").style.visibility = "visible";
    <xsl:variable name="thisOne" select="'document.allCities.select.options[document.allCities.select.selectedIndex].value'" />
    }
  </script>
</head>

<body>

    <!-- Display list of cities -->
    <div id="city_list">
    <xsl:variable name="unique-list" select="swarmlist/member/cities/city[not(.=following::city)]" />

        <form name="allCities">
        <strong>Select A City and Click the Button to Display the List: </strong> 
        <select name="select">              
            <option value="all">All</option>
            <xsl:for-each select="$unique-list">
            <xsl:sort select="."/>
            <option>
            <xsl:attribute name="value"><xsl:value-of select="."/></xsl:attribute>
            <xsl:value-of select="."/>
            </option>
            </xsl:for-each>
        </select>
      <input name="submit" type="button" value="Display" onclick="showList();" />
    </form>
    </div>
    <!-- End of City list -->

    <!-- Display list of volunteers -->
   <table border="1" id="swarms" style="visibility:hidden">
     <tr bgcolor="#9acd32">
      <th>Name</th>
      <th>Phone</th>
    </tr>

    <xsl:for-each select="swarmlist/member">
    <xsl:choose>
       <xsl:when test="cities/city = $thisOne">
    <tr>
        <td><xsl:value-of select="name"/></td>
        <td><xsl:value-of select="phone"/></td>
    </tr>
    </xsl:when>
</xsl:choose>
  </xsl:for-each>
  </table>
  <!-- End of volunteer list -->

</body>
</html>
</xsl:template>
</xsl:stylesheet>

【问题讨论】：

标签： xslt recursion drop-down-menu

【解决方案1】：

您正在尝试基于 Javascript 表达式定义 XSLT 变量。据我所知，这是行不通的，因为 XSLT在页面被渲染之前被处理，并且在任何 Javascript 被执行之前。换句话说，您不能使用 XSLT 根据用户操作动态更改页面内容。

您可以尝试将您的按钮更改为真正的<input type="submit">，并在用户点击它时让页面重新加载。这样，您可以将所选城市作为请求参数，并将其读入您的 $thisOne 变量中。

我自己从未在 XSLT 中捕获请求参数，但希望这可以帮助您： querystring using xslt

另一种更简单（但效率极低）的方法是将整个列表解析为不同的 <div> 块，然后使用 Javascript 隐藏它们并显示正确的块。

【讨论】：