jquery - 将选择下拉列表转换为打印列表

Question

可能重复：
如何使用 jquery 将 <select> 下拉列表转换为无序列表？

我想将所有选择下拉列表转换为用于打印的 ul 列表。

<select>
 <option>Item 1</option>
 <option>Item 2</option>
 <option>Item 3</option>
</select>

进入：

<ul>
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
</ul>

为什么这只显示？：

<ul></ul>

jQuery：

$('select').parent().append('<ul></ul>');
$('select option').each(function(){
  $('<ul>').append('<li>'+$(this).text()+'</li>');
});

$('select').remove();

编辑：删除选择 ID。我想逐步完成每个选择，而不仅仅是一个特定的选择。

Answer 1

您ul在循环的每一步都创建了一个新元素。改用这个：

var $select = $('#oberservationType'),
    $list = $('<ul />');

$select.find('option').each(function(){
    $list.append('<li>' + $(this).text() + '</li>');
});

$select.after( $list ).remove();

这是小提琴：http: //jsfiddle.net/YDbgv/

---

要select对页面上的每个人执行此操作，请使用以下命令：

$('select').each(function () {
    var $this = $(this),
        $list = $('<ul />');

    $this.find('option').each(function(){
        $list.append('<li>' + $(this).text() + '</li>');
    });

    $this.after( $list ).remove();
});

这是小提琴：http: //jsfiddle.net/YDbgv/2/

Answer 2

这应该做。请试一试。

$(function()
{
    var items = $('#oberservationType option'), str = '<ul>';
    for (var i = 0, len = items.length; i < len; i++)
    {
        str = str + '<li>'+items[i].innerHTML+'</li>';
    }
    str = str + '</ul>';
    console.log(str);
    $('<div/>').html(str).appendTo('body');
    $('#oberservationType').remove();

});