JQuery下拉列表选中的项目

Question

我有一个用于小屏幕的jquery下拉菜单。我使用以下代码。

  $("<select />").appendTo("nav");
     // Create default option "Go to..."
     $("<option />", {
         "selected": "selected",
         "value": "",
         "text": "Go to..."
     }).appendTo("nav select");
     // Populate dropdown with menu items
     $("nav a").each(function () {
         var el = $(this);
         $("<option />", {
             "value": el.attr("href"),
             "text": el.text()
         }).appendTo("nav select");
     });
     $("nav select").change(function () {
         window.location = $(this).find("option:selected").val();
     });

我的问题是，当菜单项导航到另一个页面时，该时间也选择的菜单始终是第一个列表项。例如，如果我从下拉列表中选择联系人页面，它将转到联系人页面并将所选下拉项目显示为“转到”。我该如何解决这个问题。

Answer 1

的 JS

$(document).ready(function () {
    loc = $(location).attr('href');
    var n = loc.split("/");
    var n1 = loc.split("/").length;
    var on_page = n[n1 - 1];
    var new_page = on_page.split("?");
    $('nav ul a').each(function () {
        if ($(this).attr('href') == new_page[0]) {
            $(this).find('li').addClass('active');
        }
    });
});

的 CSS

.active {
    background:#ffca00;
    color:#2e2f34;
    padding:16px 12px;
}

如果您在href

中使用＃，则为另一个代码

的 JS

$(document).ready(function () {
    $('nav ul li').click(function () {
        $(this).parent().parent().find('.active').removeClass('active');
        $(this).addClass('active');
    });
});

工作演示http://jsfiddle.net/XEy4s/

Answer 2

试试这个（放在.each()循环之后）：

$("nav select").val(window.location.href);

以上应该可以正常工作，但这是另一种方法：

var currentPage = window.location.href;
$("<select />").appendTo("nav");

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

// Populate dropdown with menu items
$("nav a").each(function (i, elem) {
    var el = $(this);
    var href = el.attr("href");
    $("<option />", {
        "value": href,
            "text": el.text()
    }).appendTo("nav select");

    if(href == currentPage) {
        currentPage = i+1; // +1 because of additional 'Go to' option
    }
});

// Set selected index to current page
$("nav select")[0].selectedIndex = currentPage;

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