Wybierz opcję zaznaczenia wybraną na podstawie nieuporządkowanej listy przy użyciu jQuery

Question

Konwertowałem moją nieuporządkowaną listę na listę opcji wyboru, jednak nie jestem pewien, jak mogę uczynić atrybut "zaznaczony" dodaniem opcji, która koreluje z tym samym hiperłącze na liście.

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

Answer 1

You ca n używać hasClass metody:

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

http://jsfiddle.net/5V5rY/

Answer 2

Wydaje się dynamicznie utworzyć wybierz element.

Więc trzeba delegować zdarzeń do pojemnika closest static parent do niech to działa ..

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

ma być

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

również, aby wybrać wartość można po prostu zrobić .val();

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