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

Question

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

В принципе, если я это делаю: $ ("# calendar select option"). 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> теги, не теряя все значения?

Любая помощь, очень удобная.

А.

Answer 1

вместо ...

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

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

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

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

Answer 2

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

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

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

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

Заслуга @cballou для отна тегов части ...

Answer 4

Я бы порекомендовал вам получить право сформированного li элементов разметки путем обхода параметры.

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

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

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

Проверьте выше фрагмент кода here.

Answer 5

Мое мнение таково, что значения параметра следует рассматривать как отн теги для вашего «обычай выбора»:

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

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