javascript - 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

select要素を動的に作成しているようです。

そのため、イベントをコンテナに委任して機能させる必要があります..closest static parent

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

察するに

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

また、あなたができる値を選択するには.val();

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