Return to Snippet

Revision: 19371
at October 22, 2009 10:20 by stancox


Initial Code
<!-- HTML -->
<select id="my-list">
    <option value="1">Smashing Magazine</option>
    <option value="2">Woork Up</option>
    <option value="3">Mashable</option>
</select>
<input type="button" id="submit-list" value="Button"/>
<ul id="selected-items-list"></ul>

//JavaScript
$("#submit-list").click(function selectItem(){
    s = $("option:selected")
    el = s.text();
    destination = $("#selected-items-list");
    $(destination).append('<li>'+el+'</li>');
    $(destination +':last').css('display', 'none').fadeIn(1000);
    $("option:selected").remove();
    if($('#my-list option').length==0){
        $('input[id=submit-list]').attr('disabled', 'disabled');
    }
});

Initial URL
http://woorkup.com/2009/10/14/jquery-lessons-how-to-interact-with-html-forms/

Initial Description


Initial Title
Add elements into a list from a select field

Initial Tags
list

Initial Language
jQuery