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

您可以使用hasClass方法：

 $('<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容器才能让它工作..

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

应该是

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

另外，要选择您可以.val();

的值

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

使用jQuery基于无序列表选择选择选项

2 个答案: