Jquery - change dropdown menu to list

Question

Is there a way to convert a dropdown menu to a list using jquery ... like this:

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

to

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

thanks

Answer 1

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

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

Working example in JSBin

Answer 2

First wrap the selection in a range as shown below -

Try it -

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

Answer 3

Magic!!!

If you get the data in any way

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

populate ul and li and concatenate into a type variable

 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 with ('#content').html(newcontent )

or text.

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

Answer 4

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