根据页面上列出的项目创建 html 下拉列表

Question

我有一个可以正常工作的 HTML 下拉菜单，但它是完全静态的。 IE。菜单中的项目是手动输入的，以匹配主标题页上的链接

例如。

<li><a class="tab" href="http://">INTERNAL</a>
<ul>
<li><a href=http://">Internal docs</a></li>
<li><a href="http://">SQL</a></li>
<li><a href="">Downloadables</a></li>
</ul>
</li>

菜单由位于内部页面中的部分的 3 个链接组成。

如果我将任何部分添加到内部页面，我必须手动修改我的菜单以反映这一点，但我希望在我添加新页面时自动添加此项目

这可以吗？ 我希望如此！

**编辑：

在这个问题上更清楚；我有以下html：

<div id="category_2232" class="category">
<div class="column" id="forum_259962">
<h3 class="clearfix"><a href=""><span>Internal KB Documents</span></a></h3>
</div>
<div class="column" id="forum_20160368">
<h3 class="clearfix"><a href=""><span>Downloadable Extras</span></a></h3>
</div>
<div class="column" id="forum_20632406">
<h3 class="clearfix"><a href=""><span>SQL Scripts</span></a></h3>
</div>
</div>

我将其用作创建菜单的指南，其形式为：

<li><a class="tab" href="http://">INTERNAL</a>
<ul>
<li><a href="http://">Internal KB Documents</a></li>
<li><a href="http://">Downloadable Extras</a></li>
<li><a href="http://">SQL Scripts</a></li>
</ul>
</li>

我想采用第一个代码，并且每当我添加一个新的

时，我希望菜单上相应的

条目能够自动更新。

请帮忙！ 我很确定我能做到这一点！ 必须有一些可以生成菜单项的JS....

非常感谢到目前为止所有参与的人 豪伊

【问题讨论】：

• 显示下拉菜单的 HTML！
• 这是下拉菜单。这就是我想要动态设置的位。
• div和菜单在不同的页面吗？
• Binu，是的，它们在不同的页面上。

Answer 1

当 DOM 准备就绪后，找到您的列表项并使用锚点的文本来创建可以附加到选择的选项元素。如果您在标记中添加一些 ID，那么查询 DOM 会变得更加容易。

Working Demo

jQuery

$(function () {
    var select = $('#internal-select');
    var items = $('#internal-list li a').each(function () {
        var text = $(this).text();
        select.append('<option value="' + text + '">' + text + '</option>');
    });
});

HTML

<li><a class="tab" href="http://">INTERNAL</a>
    <ul id="internal-list">
        <li> <a href="http:// ">Internal docs</a></li>
        <li><a href="http:// ">SQL</a></li>
        <li><a href=" ">Downloadables</a></li>
    </ul>
</li>
<select id="internal-select"></select>