Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to convert <select> dropdown into an unordered list using jquery?

Tags:

jquery

How do I convert a dropdown in this format:

<select id="yearfilter" name="yearfilter">
<option value="">All years</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
</select>

into an unordered list in this format:

<ul id="yearfilter" name="yearfilter">
<li value="">All years</li>
<li value="2011">2011</li>
<li value="2010">2010</li>
<li value="2009">2009</li>
</ul>

using jquery??

like image 932
highchartsdude Avatar asked Sep 07 '11 15:09

highchartsdude


1 Answers

$('#yearfilter').parent().append('<ul id="newyearfilter" name="yearfilter"></ul>');
$('#yearfilter option').each(function(){
  $('#newyearfilter').append('<li value="' + $(this).val() + '">'+$(this).text()+'</li>');
});
$('#yearfilter').remove();
$('#newyearfilter').attr('id', 'yearfilter');

this is how I would do it.

like image 115
Senad Meškin Avatar answered Apr 29 '23 11:04

Senad Meškin