jQuery下拉列表选择的项目

Question

I have a jquery drop down menu for small screens. I use the following code for that.

  $("<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();
     });

my problem is that, when menu item navigated to another page, that time also menu selected is always the first list item. For example if i select contact page from the dropdown list, it goes to contact page and shows the selected dropdown item as "Goto". How can i solve this problem.

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;
}

Another code if you are working with # in the href

js

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

Working Demo http://jsfiddle.net/XEy4s/

Answer 2

Try this (place after the .each() loops):

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

the above should work just fine, but here's another way to do it:

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();
});