transform a select list into a ul list

Question

I am trying to clone a select list into a standard ul list for enhanced javascript select box manipulation/styling.

Basically, if I do this: $("#calendar select option").clone().appendTo("#test");

i get the following html

<ul id="test">
<option>All Types</option>
<option>Installation</option>
<option>Music</option>
<option>Performing Arts</option>
<option>Season</option>
<option>YUIYIYI</option>
</ul>

How can i then change all the <option> tags to be <li> tags without losing all the values?

Any help much appricated.

A.

Answer 1

instead of...

$("#calendar select option").clone().appendTo("#test");

try...

$("#calendar select option").each(function(){
  $("<li>" + $(this).text() + "</li>").appendTo("#test");
});

Short and sweet.

Answer 2

$("#calendar select option").each(
    function(){
        html = $(this).html();
        e = document.createElement('li');
        e.setAttribute('innerHTML',html);
        $("#test").append(e);
    }
);

Not tested, but that should get you most of the way there. Good luck!

Answer 3

Something like this should work:

var list_items = '';
$("#calendar select option").each(function() {
    var $this = $(this);
    list_items += '<li rel="'+$this.val()+'">'+$this.html()+'</li>';
});
$("#test").append($(list_items));

Just as a side note, from what I recall, string concatenation and one append is usually faster than a bunch of appends or array pushes.

Credit goes to @cballou for the rel tag part...

Answer 4

I would recommend you to get the right formed li elements markup by traversing your options.

An example using $.map:

var listItems = $("#calendar select option").map(function(){
  return '<li>' + $(this).text() + '</li>';
}).get().join("");

$("#test").append(listItems);

Check the above snippet here.

Answer 5

My opinion is that the option values should be treated as rel tags for your "custom select":

var listitems = [];
$("#calendar select option").each(function() {
    var $this = $(this);
    listitems.push('<li rel="' + $this.val() + '">' + $this.text() + '</li>');
});

$('#test').html(listitems.join(""));