Javascript 使用jQuery根据无序列表选择选择选项

我已将无序列表转换为选择选项列表，但我不确定如何使“selected”属性添加与列表中相同超链接相关的选项

加价

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

$（''）.appendTo（'.navigation'）；
//用菜单项填充下拉列表
$（'.a'）。每个（函数（）{
var el=$（本）；
$('', {
“值”：el.attr（'href'），
“文本”：el.text（）
}).appendTo（“.navigation select”）；
});
//通过选择选项导航到页面
$（'.navigation select'）.change（函数（）{
window.location=$（this.find（'option:selected'）.val（）；
});
//隐藏导航列表
$（'.navigation ul'）.hide（）；

您似乎在动态创建select元素

因此，您需要将事件委托给

最近的静态父容器

使其工作

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

应该是

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

也可以通过执行

.val（）来选择值

您可以使用
hasClass
方法：

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

$（“”{
“值”：el.attr（'href'），
“文本”：el.text（），
“选定”：el.HASSCLASS（“选定”）
}).appendTo（“.navigation select”）；

我想您误解了我的问题，但感谢您在我的代码的另一部分提供的信息。
 $('<option />', {
    "value"      : el.attr('href'),
    "text"       : el.text(),
    "selected"   : el.hasClass('selected')
 }).appendTo('.navigation select');