преобразовать список выбора в список ul

Question

Я пытаюсь клонировать список выбора в стандартный список ul для улучшенного манипулирования / стилизации окна выбора javascript.

В основном, если я сделаю это: $ ("опция выбора # календаря"). clone (). appendTo ("# test");

я получаю следующий HTML

<ul id="test">
<option>All Types</option>
<option>Installation</option>
<option>Music</option>
<option>Performing Arts</option>
<option>Season</option>
<option>YUIYIYI</option>
</ul>

Как я могу затем изменить все теги <option> на теги <li> без потери всех значений?

Любая помощь очень ценится.

A.

Answer 1

Я бы порекомендовал вам получить правильную li разметку элементов, пройдя по вашим параметрам.

Пример использования $.map:

var listItems = $("#calendar select option").map(function(){
  return '<li>' + $(this).text() + '</li>';
}).get().join("");

$("#test").append(listItems);

Проверьте приведенный выше фрагмент здесь .

Answer 2

Мое мнение таково, что значения параметров должны рассматриваться как теги rel для вашего "custom select":

var listitems = [];
$("#calendar select option").each(function() {
    var $this = $(this);
    listitems.push('<li rel="' + $this.val() + '">' + $this.text() + '</li>');
});

$('#test').html(listitems.join(""));

Answer 3

Примерно так должно работать:

var list_items = '';
$("#calendar select option").each(function() {
    var $this = $(this);
    list_items += '<li rel="'+$this.val()+'">'+$this.html()+'</li>';
});
$("#test").append($(list_items));

Как примечание, из того, что я помню, конкатенация строк и один добавление обычно быстрее, чем набор добавлений или нажатий массивов.

Кредит переходит к @cballou для части тега rel ...

Answer 4

$("#calendar select option").each(
    function(){
        html = $(this).html();
        e = document.createElement('li');
        e.setAttribute('innerHTML',html);
        $("#test").append(e);
    }
);

Не проверено, но это должно помочь вам в этом. Удачи!

Answer 5

вместо ...

$("#calendar select option").clone().appendTo("#test");

попробовать ...

$("#calendar select option").each(function(){
  $("<li>" + $(this).text() + "</li>").appendTo("#test");
});

Коротко и сладко.