PickLists

by slolife

HTML

<div style="float:left">
    Left<br />
<select id='left' multiple>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
</select>
</div>
<div style="float:left; margin-left:2em;padding-top:2em">
    <div><button id='goright'>&gt;</button></div>
    <div><button id='goleft'>&lt;</button></div>
</div>
<div style="float:left; margin-left:2em">
    Right<br />
<select id='right' multiple>
</select>
</div>

JavaScript

$('#goright').click(function() {
    var $selected = $('option:selected', '#left');
    var $cloned = $selected.clone();
    $cloned.appendTo('#right');
    var $rightoptions = $('option', '#right');
    var arr = $.makeArray($rightoptions);
    arr.sort(function(a,b) {
        if (a.text < b.text) return -1;
        if (a.text > b.text) return 1;
        return 0;
    });
    $('#right').empty();
    $(arr).appendTo('#right');
});