如何在加载活动项时启用活动项以在页面的下拉列表中选中

也许这样的事情有效：（在每个循环内）

$('ul.showdiv').each(function() {
    var $select = $('<select />');
    $(this).find('a').each(function() {
        var $option = $('<option />');
        $option.attr('value', $(this).attr('href')).html($(this).html());
        if($(this).children().hasClass('active')){
            $option.prop('selected', true);
        }
        $select.append($option);
    });
    $(this).replaceWith($select);
});

这样的事情呢？我知道它会稍微改变你的代码，但它有效。只需相应地更改文件名即可。

应使用的文件名示例："userExperienceDesign.html"以确保导航菜单正常工作

从您自己的文件中运行它时，只需擦除以下行：filename = "item3.html";

斯菲德尔

//URL to id to select active link
var href = window.location.href;
var filename = href.split('/').pop();
filename = "item3.html";
//Example of a filename that should be used:  "staffAugmentation.html" in order to make sure that the navigation menu works correctly
filename = filename.replace(/'..+$/, '');
$("#nav_" + filename).children("*").addClass("active");
if ($("#nav_" + filename).parent().parent("li")) {
    $("#nav_" + filename).parent().parent().children("*").addClass("active");
}
//Fix subMenu widths: min width same as parent nav item and if right side of subMenu item surpasses parent ul's width, left offset compensates
var navWidth = $("#nav").width();
var navLeft = $("#nav").offset().left;
var navTotal = navWidth + navLeft;
var subMenus = $("#nav").children("li").children("ul");
for (var i = 0; i < subMenus.length; i++) {
    var subMenu = subMenus.eq(i);
    subMenu.parent().children("span").css({"padding-right":30+"px"});
    subMenu.parent().addClass("hasSubMenu");
    subMenu.children("li").css({
        "min-width": subMenu.parent().width() - 5 + "px"
    });
    var subMenuWidth = subMenu.width();
    var subMenuLeft = subMenu.offset().left;
    var subMenuTotal = subMenuWidth + subMenuLeft;
    if (navTotal < subMenuTotal) {
        var newOffsetLeft = navTotal - subMenuTotal;
        subMenu.css({
            "left": subMenuLeft + newOffsetLeft + "px"
        });
    }
}
$("#nav").click(function () {
    if ($(this).find("span").length > 0) {
        $(this).find("ul").toggle();
    }
});

html, body {
    padding:0px;
    margin:0px;
    background-color:grey;
}
#nav {
    position:absolute;
    list-style-type:none;
    padding:0px;
    margin-left:5px;
    margin-top:5px;
    background-color:white;
    font-size:20px;
    white-space:nowrap;
}
#nav * {
    -webkit-user-select: none;
    /* Chrome all / Safari all */
    -moz-user-select: none;
    /* Firefox all */
    -ms-user-select: none;
    /* IE 10+ */
    /* No support for these yet, use at own risk */
    -o-user-select: none;
    user-select: none;
}
#nav>li {
    display:inline-block;
    position:relative;
    margin:-5px;
    padding:0px;
}
#nav>li.hasSubMenu:after {
    content:"'25BE";
    display:inline-block;
    position:absolute;
    right:14px;
    bottom:13px;
    z-index:2;
    font-size:15px;
}
#nav li>* {
    display:block;
    color:black;
    text-decoration:none;
    padding:10px;
    background-color:white;
    text-align:center;
    cursor:pointer;
}
#nav>li>* {
    padding-right:15px;
}
#nav li>a:hover, #nav li>span:hover{
    color:white;
    background-color:#bbb;
}
#nav ul {
    display:none;
    position:absolute;
    list-style-type:none;
    padding:0px;
    margin-left:0px;
    background-color:white;
    font-size:18px;
    white-space:nowrap;
}
.active {
    background-color:#789abc !important;
    color:bbb;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="nav" class="list-group showdiv">
    <li id="nav_bespokeSoftwareDevelopment"><a href="">Bespoke Software Development</a>
    </li>
    <li id="nav_userExperienceDesign"><a href="">User Experience Design</a>
    </li>
    <li id="nav_staffAugmentation"><span>Staff Augmentation</span>
        <ul>
            <li id="nav_item1"><a href="">Item 1</a>
            </li>
            <li id="nav_item2"><a href="">Item 2</a>
            </li>
            <li id="nav_item3"><a href="">Item 3</a>
            </li>
        </ul>
    </li>
    <li id="nav_testingAndValidation"><a href="">Testing and Validation</a>
    </li>
    <li id="nav_gaming"><a href="">Gaming</a>
    </li>
</ul>