正在将无序列表转换为选择..但有一个转折

Converting unordered list to select... but with a twist

本文关键字：选择 有一个 转换 无序 列表      更新时间：2023-09-26

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

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

我希望具有"活动"类的列表项作为带有"选定=选定"的选项显示在选择下拉列表中。

我该怎么做？

你应该有 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");
您可以通过在

.each()部分中为active类添加检查来实现此目的。另外，我.appendTo()建议从.each()因为追加到 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/

相关文章：