Is there a way to convert a drop down menu to be a list using jquery... so:

<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>

to

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>

Thanks

Is there a way to convert a drop down menu to be a list using jquery... so:

<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>

to

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>

Thanks

• javascript
• jquery

4 Answers 4

Just iterate over the <option> elements and create a corresponding <li> for each, then add them to a <ul>, like this: (where #menu is the ID of your drop-down)

var list = $('<ul>');
$('#menu option').each(function() {
  $('<li>').text($(this).text()).appendTo(list);
});
list.appendTo($('body'));

Working example on JSBin

Initially wrap select in span as shown below -

Try this -

  <span id="replace">
    <select id="test">
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
  </span>

var html = '<ul>';
$('#test option').each(function(){
html += '<li>'+$(this).text()+'</li>';
});
html += '</ul>';

$('#replace').html(html);

Magic!!!

If you get the data by any means

replace the dropdown by .html() or .text().

populate the ul and li and concatinate into a variable like

var newcontent = "<ul> 
<li>1</li> 
<li>2</li> 
<li>3</li> 
</ul> "

i assume the select box is in a div with id "content"

replace content by ('#content').html(newcontent )

or text.

NB. You should get the data and create the ul li . then you can replace

Tag names are immutable in DOM elements. If possible you should consider including both in the source code and then use toggle() to switch