将无序列表转换为选择...但有所不同答案

【问题标题】：Converting unordered list to select... but with a twist将无序列表转换为选择...但有所不同
【发布时间】：2015-03-09 12:15:56
【问题描述】：

我正在将项目的无序列表转换为选项的选择菜单。

HTML：

<div class="dropdown-container converted">
    <button class="button__black __small" data-dropdown="drop1" aria-controls="drop1" aria-expanded="false">Artist <img src="{site_url}/do-not-enter-or-modify-or-erase/site-theme/img/dropdown-arrow.png" alt="Dropdown" /></button>
    <ul id="drop1" class="f-dropdown mega book-filter-dropdown category-dropdown" data-dropdown-content aria-hidden="true" tabindex="-1">
        <li><a href="#">Item 1</a></li>
        <li class="active"><a class="active" href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
    </ul>
</div>

还有 Javascript：

// Create the dropdown base
$("<select />").appendTo(".converted");

//Create default option "Go to..."
$("<option />", {
  "selected": "selected",
  "value"   : "catalog/products",
  "text"    : "All Artists"
}).appendTo(".converted select");

// Populate dropdown with menu items
$(".converted a").each(function() {
  var el = $(this);
  $("<option />", {
    "value"   : el.attr("href"),
    "text"    : el.text()
  }).appendTo(".converted select");
});

$(".converted select").change(function() {
  window.location = $(this).find("option:selected").val();
});

我希望将具有“活动”类的列表项作为“selected=selected”选项显示在选择下拉列表中。

我该怎么做？

【问题讨论】：

请创建一个小提琴。
我在您的代码中看不到 a 元素。他们在哪？你是说li？检查this
"selected" : el.hasClass("active"), ...那么“扭曲”在哪里？

标签： javascript jquery html html-lists

【解决方案1】：

您应该拥有 attr selected=true|false。在 el.prop('selected', true|false) 中查看 $.prop 或在创建元素时传入值：

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

【讨论】：

问题是没有a元素。我认为OP指的是li，但他没有澄清。
是的，这是一个问题，但不是他问的问题。
我的错误。我更正了代码，添加了 a 元素。

【解决方案2】：

您可以通过在.each() 部分中添加对active 类的检查来实现此目的。另外，我建议从 .each() 中删除 .appendTo() 函数，因为追加到 DOM 是一项非常昂贵的操作，因此您需要做的是在 .each() 和更高版本中创建一个元素数组一次性追加该数组。

考虑有这样的东西：

var lis = $('#drop1').children('li'),
    target = $('.target'),
    options = [],
    $element;

lis.each(function(index, element){
    $element = $(element);

    options.push($("<option />", { "value" : $element.attr("href"), "text" : $element.text(), "selected": $element.hasClass('active') }));
});

target.append(options)

这可以在网上看到：http://jsfiddle.net/3n34g90q/

【讨论】：