Multi select listing

Question

How would you go about creating a multi list selection area. You should be able to double click on a item on the left to add it to a selected area and you should be able to double click on the selected area to remove a item from the list(selected).

<ul id="selection">
    <li><span>Apple</span></li>
    <li><span>Pear</span></li>
    <li><span>Banana</span></li>
    <li><span>Melon</span></li>
</ul>



<ul id="selected">
    <li><span>Mango</span></li>
</ul>

Ive tried to play around with adding ad removing clases in JQuery, but it just did not work.

Please help

Answer 1

Helping a nother Morne, sure thing

Ive got just the thing you need Hope it will help

http://jsfiddle.net/nel_mo/Y5256/

// Copy over on double click and  // Delete on double click on
selected side
    $('#selection').on('dblclick', 'li', function() {
        $('#selected').append($(this).clone());
    });


    $('#selected').on('dblclick', 'li', function() {
        $(this).remove();
    });



// Move over and back on double click on each side
    $('#selection').on('dblclick', 'li', function() {
        $('#selected').append($(this).clone());
        $(this).remove();
    });


    $('#selected').on('dblclick', 'li', function() {
        $('#selection').append($(this).clone());
        $(this).remove();
    });

Good luck