How to convert ul to option

Question

How can I convert an unordered list:

<ul class="sizeSelect dropdown-menu">
    <li value="112">
        <a onclick="setDropdownText(112);">30x30 30" Waist 30" Leg</a>
    </li>
    <li value="51">
        <a onclick="setDropdownText(51);">30x32 30" Waist 32" Leg</a>
    </li>
    <li value="113">
        <a onclick="setDropdownText(113);">32x30 32" Waist 30" Leg</a>
    </li>
</ul>

To a select field:

<select>
    <option>30x30 30" Waist 30" Leg</option>
    <option>30x32 30" Waist 32" Leg</option>
    <option>32x30 32" Waist 30" Leg</option>
</select>

Via jQuery?

possible duplicate of [Use jQuery to change an HTML tag?](http://stackoverflow.com/questions/918792/use-jquery-to-change-an-html-tag) — isherwood, Mar 03 '14 at 21:37

Ja͢ck · Accepted Answer · 2014-03-03T22:10:17.027

2

Certainly an odd requirement, but the easiest is probably by using replaceWith():

$('.sizeSelect').replaceWith(function() {
    var $select = $('<select>');

    $('li', this).each(function(item) {
        $select.append(new Option($(this).text(), $(this).attr('value')));
    });

    return $select;
});

Demo

edited Mar 03 '14 at 22:10

answered Mar 03 '14 at 21:51

Ja͢ck

170,779
38
263
309

You can create elements with jQuery pretty easily as well: `$(" – Sampson Mar 03 '14 at 22:01
@JonathanSampson I prefer the constructor, shorter too ;-) – Ja͢ck Mar 03 '14 at 22:10

How to convert ul to option

1 Answers1