0

重複の可能性:
<select> ドロップダウンを 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 を削除しました。特定の 1 つだけを選択するのではなく、それぞれをステップ実行したいと考えています。

4

2 に答える 2

2

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/

于 2013-02-01T20:12:33.340 に答える
0

これで十分です。ぜひ一度お試しください。

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

});
于 2013-02-01T20:21:10.443 に答える