4

如何使用 jQuery 更改我的 HTML 输出？我的 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>

谢谢你的帮助......我只需要一个提示..一个搜索词或某事。如何操作输出？

4

3 回答 3

0

这是我更新的 Skript .. 你会看到我有 3 个列表，我尝试将它们分开。这几乎是完美的。链接也是可点击的。

    http://jsfiddle.net/mobilat/Nwdnn/
于 2013-05-07T08:39:01.260 回答
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 回答
0

您可以使用 $.each 遍历您的定义列表，首先您必须使用定义列表 id 定位 ol，并且可能通过 find 遍历以找到列表，并且在 $.each 迭代列表中您可以构建下拉列表

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