Moving from one multiselect to another

Shows how you can move option values from one select box to another. Also shows how manipulate select options so all the ones in the chosen box are selected before submission happens.

by timotheus

HTML

<form action="javascript:void(0);"> 
   <select multiple="multiple" name="all_options" class="all_options">
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
        <option value="4">Four</option>
        <option value="5">Five</option>
    </select>
    <button class="go_in">in</button>
    <button class="go_out">out</button>
    <select multiple="multiple" name="chosen_options" class="chosen_options">
        <option value="7">Seven</option>
    </select>
    <br/><input type="submit" value="submit">
</form>

CSS

form
{
    padding:10px;
}

JavaScript

$('.go_in').click(function() {
    return !$('.all_options option:selected').remove().appendTo('.chosen_options');
});
$('.go_out').click(function() {
   return !$('.chosen_options option:selected').remove().appendTo('.all_options'); 
});

$('form').submit(function() {
    $('.all_options option').prop('selected','');
    $('.chosen_options option').prop('selected','selected');
    alert($(this).serialize());
});