select multiple box items from one box to another

by Ankit Patidar

HTML

<form name="selection" method="post" onSubmit="return selectAll()"> 
    <select multiple size="10" id="from">
        <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>
        <option value="6">Six</option>
        <option value="7">Seven</option>
        <option value="8">Eight</option>
        <option value="9">Nine</option>
        <option value="10">Ten</option>
    </select>
    <div class="controls">
        <a href="javascript:moveAll('from', 'to')">&gt;&gt;</a> 
        <a href="javascript:moveSelected('from', 'to')">&gt;</a> 
        <a href="javascript:moveSelected('to', 'from')">&lt;</a> 
        <a href="javascript:moveAll('to', 'from')" href="#">&lt;&lt;</a>
    </div>
    <select multiple id="to" size="10" name="topics[]"></select>
    <form>

CSS

select {
        width: 200px;
        float: left;
    }
    .controls {
        width: 40px;
        float: left;
        margin: 10px;
    }
    .controls a {
        background-color: #222222;
        border-radius: 4px;
        border: 2px solid #000;
        color: #ffffff;
        padding: 2px;
        font-size: 14px;
        text-decoration: none;
        display: inline-block;
        text-align: center;
        margin: 5px;
        width: 20px;
    }

JavaScript

function moveAll(from, to) {
    $('#'+from+' option').remove().appendTo('#'+to); 
}

function moveSelected(from, to) {
    $('#'+from+' option:selected').remove().appendTo('#'+to); 
}
function selectAll() {
    $("select option").attr("selected","selected");
}