jQueryを使用して順序付けられていないリストに基づいて選択オプションを選択します

Question

順序付けられていないリストを選択オプションリストに変換しましたが、どのように '選択'属性に同じリスト内のハイパーリンク。

マークアップ

<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

私はあなたが私の質問を誤解だと思うが、あなたの入力に感謝私のコードの他の部分に

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

http://jsfiddle.net/5V5rY/

Answer 2

あなたは動的にselect要素を作成するように見えます。

ですから、デリゲートにそれが動作させるためにclosest static parentコンテナにイベント ..

あなただけ .val();を行うことができます値を選択することも

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

ことになって

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

が必要

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