Not much to explain just an example:

Left

Right

Show me the code!

HTML

<div class="OneOfTwo" style="width:60%">
	<div style="float:left;">
		<strong>Left</strong><br />
		<select id="available" size="5" multiple="multiple" style="width: 170px;">
		<option>Left 1</option>
		<option>Left 2</option>
		<option>Left 3</option>
		<option>Left 4</option>
		<option>Left 5</option>
		</select>
	</div>
	<div style="float:left;height:50px;padding-top:25px;">
		<input type="button"  value="&lt;" onclick="swapElement('selected','available')" /><br />
		<input type="button" value="&gt;" onclick="swapElement('available','selected')"  /><br />
	</div>
	<div style="float:left;">
		<strong>Right</strong><br />
		<select id="selected" name="SIDEBAR[]" size="5" multiple="multiple" style="width: 170px;">
		<option>Right 1</option>
		<option>Right 2</option>
		<option>Right 3</option>
		<option>Right 4</option>
		<option>Right 5</option>
		</select>
		<br />
		<input type="button"  value="UP" onclick=" moveUp('selected')" />
		<input type="button"  value="DOWN" onclick="moveDown('selected')" />
	</div>
</div>
<div style="clear:both"></div>

JavaScript

function moveUp(selectId) {
	var selectList = document.getElementById(selectId);
	var selectOptions = selectList.getElementsByTagName('option');
	for (var i = 1; i < selectOptions.length; i++) {
		var opt = selectOptions[i];
		if (opt.selected) {
			selectList.removeChild(opt);
			selectList.insertBefore(opt, selectOptions[i - 1]);
		}
       }
}
 
function moveDown(selectId) {
	var selectList = document.getElementById(selectId);
	var selectOptions = selectList.getElementsByTagName('option');
	for (var i = selectOptions.length - 2; i >= 0; i--) {
		var opt = selectOptions[i];
		if (opt.selected) {
		   var nextOpt = selectOptions[i + 1];
		   opt = selectList.removeChild(opt);
		   nextOpt = selectList.replaceChild(opt, nextOpt);
		   selectList.insertBefore(nextOpt, opt);
		}
       }
}
function swapElement(fromList,toList){
    var selectOptions = document.getElementById(fromList);
    for (var i = 0; i < selectOptions.length; i++) {
        var opt = selectOptions[i];
        if (opt.selected) {
            document.getElementById(fromList).removeChild(opt);
            document.getElementById(toList).appendChild(opt);
            i--;
        }
    }
}
function selectAllOptions(selStr)
{
    var selObj = document.getElementById(selStr);
    for (var i=0; i<selObj.options.length; i++) {
        selObj.options[i].selected = true;
    }
}

How to catch everything in PHP, using a form:

First in the form we need to select all the elements of the input before sending:


inside here the selects

To catch it in PHP:

 $_POST["SIDEBAR"]=implode(",",$_POST["SIDEBAR"]);

Now you have in $_POST["SIDEBAR"] all the elements separated by coma, remember that you receive an Array.

Source from different places I , II