CODEWITHSUNDEEP
javascriptjqueryhtmlcss
michaelmcgurk
michaelmcgurk

Reputation: 6509

Remove nested options from select menu - jQuery

I have a simple bit of Javascript.

Is it possible to remove any nested parts of this menu when it becomes a select menu?

So in the demo below, the '- test' part wouldn't appear in the select menu.

DEMO: http://jsfiddle.net/ZBZRw/

My jQuery is: 

$(function() {

            var options = '<option selected>Go to...</option>';
            $('nav div.alt').find('a').each(function () {
                var text = $(this).text(),
                purl = $(this).attr("href"),
                    depth = $(this).parent().parents('ul').length,
                    depthChar = '',
                    i = 1;
                for (i; i < depth; i++) { depthChar += '&ndash;&nbsp;'; }
                options += '<option value="' + purl + '">' + depthChar + text + '</option>';
            });
            $('<select />').append(options).appendTo('nav div.alt');

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

        });

Many thanks for any advice.

Upvotes: 0

Views: 151

Answers (1)

Explosion Pills
Explosion Pills

Reputation: 191799

Use the child selector > to be more exact in the <a> elements that you select

$('nav div.alt > ul > li > a').each(function () {

http://jsfiddle.net/ZBZRw/1/

Upvotes: 2

Related Questions