Make select option selected based on an unordered list using jQuery

Question

I've converted my unordered list into a select option list, however I'm not sure how can I make the 'selected' attribute added the option which correlates to the same hyperlink in the list.

Mark-up

<div class="navigation">
    <ul>
         <li><a href="foo.html">Foo</a></li>
         <li><a href="bar.html" class="selected">Bar</a></li>
         <li><a href="boo.html">Boo</a></li>
    </ul>
</div>

Javascript

$('<select />').appendTo('.navigation');

// Populate dropdown with menu items
$('.navigation ul a').each(function() {
 var el = $(this);
 $('<option />', {
    "value"   : el.attr('href'),
    "text"    : el.text()
 }).appendTo('.navigation select');
});
// Navigate to page on select option
$('.navigation select').change(function() {
  window.location = $(this).find('option:selected').val();
});
// Hide navigation list
$('.navigation ul').hide();

Ram · Accepted Answer · 2012-12-19 23:26:15Z

6

You can use hasClass method:

 $('<option />', {
    "value"      : el.attr('href'),
    "text"       : el.text(),
    "selected"   : el.hasClass('selected')
 }).appendTo('.navigation select');

http://jsfiddle.net/5V5rY/

edited Dec 19, 2012 at 23:26

answered Dec 19, 2012 at 23:17

Ram

145k16 gold badges174 silver badges201 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sushanth -- · Accepted Answer · 2012-12-19 23:15:26Z

-1

You seem to dynamically create the select element .

So you need to delegate the event to the closest static parent container to let it work..

$('.navigation select').change(function() {

supposed to be

$('.navigation').on('change', 'select',function() {

Also to select the value you can just do .val();

window.location = $(this).val();

answered Dec 19, 2012 at 23:15

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

1 Comment

calebo Over a year ago

I think you misunderstood my question, but thanks for your input on the other part of my code.

Collectives™ on Stack Overflow

Make select option selected based on an unordered list using jQuery

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related