将无序列表（ul 标签）导航转换为下拉导航（选择标签）

Question

您能帮我将无序列表导航转换为下拉导航吗？

目前我使用这个脚本

  $(function() {

    if (document.getElementById("level-2")) {
        initElement("#level-2");
    }
    if (document.getElementById("level-3")) {
        initElement("#level-3");
    }
    if (document.getElementById("embedded-level-3")) {
        initElement("#embedded-level-3");
    }


    function initElement(element) {
        $("<select />").appendTo(element);

        // Create default option "Go to..."
        $("<option />", {
            "selected": "selected",
            "value"   : "",
            "text"    : "Go to..."
        }).appendTo("nav"+element+" select");

        $(element + " a").each(function() {
            var el = $(this);
            $("<option />", {
            "value" : el.attr("href"),

            "text"  : el.text()
        }).appendTo(element + " select");
    });

        $(element + " select").change(function() {
            window.location = $(this).find("option:selected").val();
        });}
});

此脚本将此“li”标签列表转换为选择>选项标签下拉列表

活动页面由a.active(a class="active")定义。

是否可以更改脚本以将“活动”类中的链接和链接中的文本放在下拉菜单选择>选项的第一个位置而不是“转到...”？

更新 明确地说，我在寻找什么。

需要从列表中找到类为“活动”的元素，将其放在选择下拉菜单的第一个位置，然后将列表的所有其他元素放入选择下拉列表中

从这里

<nav>
    <ul>
    <li><a href="link1">Link 1</a></li>
    <li class="active"><a href="link2" class="active">Link 2</a></li>
    <li><a href="link3">Link 3</a></li>
    </ul>
</nav>

到这里

<select>
<option class="active" value="link2>Link 2</option>
<option value="link1>Link 1</option>
<option value="link3>Link 3</option>
</select>

Answer 1

是的，有可能，试试这个：

    $("<option />", {
        "selected": "selected",
        "value"   : "",
        "text"    : "Go to...", //Remove if you dont need it.
        "class"   : "active"
    }).appendTo("nav"+element+" select");