Question

可能重复：
How to convert <select> dropdown into an unordered list using jquery?

我想将所有选择下拉列表转换为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();

});

将选择下拉列表转换为列表以进行打印

2 个答案: