如何动态填写下拉菜单?

时间:2019-04-08 14:08:38

标签: javascript html xslt drop-down-menu

我得到了一些代码(HTML和JavaScript),该代码创建了一个具有三列和动态行的表。我想有一个基于第一列条目的下拉菜单。因此,在完成我的表格后,应填写下拉菜单。第一列可以有多个相同的条目。因此有必要在我的下拉菜单中只显示一次。 目前,我只有一个静态的下拉菜单。请参见下面的代码。该程序在静态下拉菜单中的效果很好。

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:fo="http://www.w3.org/1999/XSL/Format">
    <table id="myTable">
        <colgroup>
            <col width="150" style="background-color:red"></col>
            <col width="165"></col>
        </colgroup>
        <tr  style ="background-color:grey">
            <th>plane
                <select id="modelRangeDropdown" onchange="filterReports()">
                    <option selected="selected">All</option>
                    <option>number1</option>
                    <option>number2</option>                        
                </select>                   
            </th>   
            <th>Datum</th>
            <th>Secret</th>
        </tr>
        <xsl:for-each select="logstore/plane/trigger">
            <tr>
                <td><xsl:value-of select="../Name"/></td>
                <td><xsl:value-of select="date"/></td>
                <td><xsl:value-of select="secret"/></td>
            </tr>
        </xsl:for-each>
    </table>
    <script type="text/javascript" src="/../../../filterReports.js"></script>           
</body>
</html>
</xsl:template>
</xsl:stylesheet>

1 个答案:

答案 0 :(得分:0)

如果您可以使用XSLT 2.0,则可以使用distinct-values并像这样编写xsl:for-each

<select id="modelRangeDropdown" onchange="filterReports()">
    <option selected="selected">All</option>
    <xsl:for-each select="distinct-values(logstore/plane/Name)">
        <option value="{.}">
            <xsl:value-of select="." />
        </option>
    </xsl:for-each>
</select>  

另一方面,如果您受限于XSLT 1.0,则需要使用一种称为Muenchian Grouping的技术。您将这样定义一个键:

<xsl:key name="planes" match="plane/Name" use="." />

然后,要获取不同的值,您可以这样做.....

<select id="modelRangeDropdown" onchange="filterReports()">
    <option selected="selected">All</option>
    <xsl:for-each select="logstore/plane/Name[generate-id() = generate-id(key('planes', .)[1])]">
        <option value="{.}">
            <xsl:value-of select="." />
        </option>
    </xsl:for-each>                    
</select>