4

HTML 出力を jQuery で変更するにはどうすればよいですか? 私の Magento-Shop は定義リストを提供してくれますが、これらのリストをドロップダウン (選択/オプション) フォームとして使用したいと考えています。私は jQuery 研修生です ... プロではありません ;)

だから私はいくつかのヒントやヒントが必要です。キーワードはどれでしたか

<dl id="list">

<dt>Erste Überschrift</dt>

    <dd>
        <ol>
            <li><a href="http://www.google.com/">link 1</a></li>
            <li><a href="http://www.bing.com/">link 2</a></li>
            <li><a href="http://www.yahoo.com/">link 3</a></li>
        </ol>
    </dd></dl>

私の出力であり、ドロップダウンとして欲しい

<select id="list">
<option value="" selected>Erste Überschrift</option>
<option value="http://www.google.com/">Google</option>
<option value="http://www.bing.com/">Bing</option>
<option value="http://www.yahoo.com/">Yahoo</option>

助けてくれてありがとう...ヒントだけが必要です..検索ワードまたはsth。出力を操作するにはどうすればよいですか?

4

3 に答える 3

0

$.each を使用して定義リストを反復処理できます。最初に、定義リスト ID を使用して ol をターゲットにする必要があります。また、find でトラバースしてリストを見つけ、$.each 反復リストでドロップダウンを構築できます。

$('#list').find('ol').each()
...
...
$('#list').append('<option value="value">value name</option>');
于 2013-05-06T16:40:38.853 に答える
0

データ リストからすべての値を取得し、新しい HTML 文字列を作成して DOM に追加する必要があります。

また、同じ ID を持つため、新しい選択を追加する前にデータリストを削除する必要があります。

選択を追加する方法は、HTML の構造によって異なります。以前appendは最初の子として追加していましたが、別のことを行う必要があるかもしれません。

最初のオプションとして追加されたラベルを編集

$(function() {
    var list = $('#list'),
        label = list.find('dt').text(),
        parent = list.parent(),
        anchors = list.find('a'),
        html = '<select id="list"><option selected value="">' + list.find('dt').text() + '</option>'
        ;

    for(var i=0; i<anchors.length; i++) {
        //each anchor becomes an option in the select
        html += '<option value="' + anchors.eq(i).attr('href') + '">' + anchors.eq(i).text() + '</option>'; 
    }
    html += '</select>';

    list.remove(); //remove your datalist
    parent.append(html); //add your new select
});

ワーキングjsFiddle

于 2013-05-06T16:52:30.623 に答える