Блог

Главная - Вопросы по программированию - Как я могу динамически заполнять выпадающее меню?

Как я могу динамически заполнять выпадающее меню?

#javascript #html #xslt #drop-down-menu

#javascript #HTML #xslt #выпадающее меню

Вопрос:

Я получил некоторый код (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. Каков источник данных для этой таблицы?

2. Данные поступают из программы Java. С помощью приведенного выше кода «<xsl:для каждого …> я получу динамические данные из программы Java.

3. Не могли бы вы отредактировать свой вопрос, чтобы показать образец XML-данных, которые вы получаете из программы, пожалуйста? Кроме того, можете ли вы сказать, можете ли вы использовать XSLT 2.0 или 3.0? (Я вижу, что в таблице стилей указана версия 1.0, но если решение предполагает получение различных значений, то с XSLT 2.0 это будет немного проще). Спасибо!

4. Кроме того, в вашей таблице стилей XSLT, похоже, отсутствует строка. Внизу у вас есть закрывающий </xsl:template> тег, но нигде нет соответствующего открывающего <xsl:template match=".."> тега.

5. Из вашего вопроса следует, что вы пытаетесь выполнить некоторую дедупликацию, чтобы создать свое меню. Мне все еще не ясно, используется ли таблица стилей в контексте серверной части (вы указываете «java program» в качестве источника входного документа) или на стороне клиента (как указано в вопросе). Это коснется некоторых моментов, сделанных комментарием TimC.

Ответ №1:

Если бы вы могли использовать 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, вам нужно будет использовать технику, называемую группировкой Мюнхена. Вы бы определили ключ следующим образом:

 <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>