Преобразование неупорядоченного списка для выбора ... но с завихрением

Question

Я конвертирую неупорядоченный список элементов в меню выбора опций.

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

Я хотел бы элемент списка с классом «активных», который будет представлен в раскрывающемся списке выберите в качестве опции «выбран = выбран».

Как это сделать?

Answer 1

У вас должен быть attr selected=true|false. Либо смотреть на $.prop как в el.prop('selected', true|false) или передать значение при создании элемента:

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

Answer 2

Вы можете достичь этого путем добавления чек на active класса в .each() части. Кроме того, я бы предложил удалить функцию .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/