javascript - 根据页面上列出的项目创建 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 个位于内部页面的部分链接组成。

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

这可以做到吗？ 我希望如此!

**编辑:

为了更清楚地说明这个问题；我有以下 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 可以生成菜单项....

非常感谢迄今为止所有参与者 豪伊

最佳答案

当 DOM 准备就绪时，找到列表项并使用 anchor 的文本创建可以附加到选择的选项元素。如果您向标记中添加一些 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>

关于javascript - 根据页面上列出的项目创建 html 下拉列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18659934/

Answer 1

当 DOM 准备就绪时，找到列表项并使用 anchor 的文本创建可以附加到选择的选项元素。如果您向标记中添加一些 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>