使用jQuery将无序列表菜单转换为下拉菜单时如何添加ID

Question

我正在尝试创建响应式布局，其中导航链接变为特定屏幕大小的下拉菜单。我正在使用以下代码here：

$(function() {
$('ul.selectdropdown').each(function() {
    var $select = $('<select />');

    $(this).find('a').each(function() {
        var $option = $('<option />');
        $option.attr('value', $(this).attr('href')).html($(this).html());
        $select.append($option);
    });

    $(this).replaceWith($select);
});
});

它按我想要的方式工作。但是，它不保留列表项最初具有的ID。我想保留原始ID，或为每个创建的选项输出唯一ID。

有没有一种简单的方法可以实现这一目标？

Answer 1

您似乎没有将ID分配给新创建的options。以下代码假设<li>元素具有id，而不是<a>。

更改

$option.attr('value', $(this).attr('href')).html($(this).html());

到

$option.attr('value', $(this).attr('href')).html($(this).html()).attr('id', $(this).parent().attr('id'));