how can I change my HTML Output with jQuery?

Question

how can I change my HTML Output with jQuery? My Magento-Shop gives me an definition List, but I want these lists as a dropdown (select/options) form. I'm a jQuery Trainee ... not a Pro ;)

So I need some tipps or hints. Which were the keywords

<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>

is my output and I want it as a dropdown

<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>

Thanks for your help ... I only need a hint .. a searchword or sth. How can I manipulate the output?

score 0 · Answer 1 · answered May 06 '13 at 16:40

You can iterate through your definition list using $.each, first you have to target the ol using the definition list id and maybe traversing by find to find the list and in the $.each iterating list you can construct the drop down

$('#list').find('ol').each()
...
...
$('#list').append('<option value="value">value name</option>');

cfs · Accepted Answer · 2013-05-06T16:58:45.523

You'll need to get all the values from you data list, then create a new HTML string to add to the DOM.

You'll also need to remove the datalist before adding your new select, since they will have the same ID.

How you add the select is going to depend on the structure of your HTML; I used append to add it as the fist child, though you may need to do something different.

EDIT added label as first option

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

Working jsFiddle

Thanks for your help. I take your skript and make some changes .. I have 3
and now I try to seperate them .. here's my fiddle http://jsfiddle.net/mobilat/Nwdnn/ — user2310852, May 07 '13 at 08:43

score 0 · Answer 3 · answered May 07 '13 at 08:39

0

Here's my updated Skript .. You'll see I have 3 Lists and I try to seperate them. It's nearly perfect. And the Links are also clickable.


    http://jsfiddle.net/mobilat/Nwdnn/

answered May 07 '13 at 08:39

user2310852

1,654
1
25
52

how can I change my HTML Output with jQuery?

3 Answers3