Dynamic UL from SELECT

by ChrisStanyon

HTML

<form id="genreform">
    <select size="5" id="new-genres" multiple>
	    <option id="2">Comedy</option>
	    <option id="3">Funny</option>
	    <option id="4">Love</option>
    </select>
    <input id="go" name="go" type="button" value="Save Genres">
</form>

<ul id="user-genres">
	<li id="country">Country</li>
	<li id="rock">Rock</li>
	<li id="soft">Soft</li>
	<li id="jazz">Jazz</li>
</ul>

CSS

#new-genres, #go { display:block; width: 200px; }

JavaScript

$('#go').click(function() {
	//Clear the old values
	$('#user-genres').empty();
	
	//add the new ones
	$.map($('#new-genres option:selected'), function(option) {
    	$('#user-genres').append($('<li>').text(option.value).attr('id', option.value));
	});
});