<html>
<head>
<script>
//General functions for moving options around multiple
//select lists
// Adds one or more selected options to the target
function add_selected(strSourceId, strTargetId){
//get handles to source and target select objects
var objSource = document.getElementById(strSourceId);
var objTarget = document.getElementById(strTargetId);
//loop through the options on the source
for(var i = 0; i < objSource.options.length; i++){
if(objSource.options[i].selected){
//if the option is selected
if(!has_option(strTargetId, objSource.options[i])){
//and the target does not contain an equivalent option
//create a new option in the target that is equivalent
//to the selected option in the source
newOption = new Option(objSource.options[i].text);
newOption.value = objSource.options[i].value;
objTarget.options[objTarget.options.length] = newOption;
}
}
}
}
//Adds all of the options to the target
function add_all(strSourceId, strTargetId){
//get handles to source and target select objects
var objSource = document.getElementById(strSourceId);
var objTarget = document.getElementById(strTargetId);
//loop through the options on the source
for(var i = 0; i < objSource.options.length; i++){
if(!has_option(strTargetId, objSource.options[i])){
//if the target doesn't contain an equivalent option
//create one
newOption = new Option(objSource.options[i].text);
newOption.value = objSource.options[i].value;
objTarget.options[objTarget.options.length] = newOption;
}
}
}
//Removes one or more selected options from the target
function remove_selected(strTargetId){
// get a handle to the target select
var objTarget = document.getElementById(strTargetId);
while(objTarget.selectedIndex >= 0){
//while there is still one or more options selected
//remove the selected option
objTarget.options[objTarget.selectedIndex] = null;
}
}
//Removes all the options from the target
function remove_all(strTargetId){
//get a handle to the target select
var objTarget = document.getElementById(strTargetId);
while(objTarget.options[0] != null){
//while the first option exists
//delete the first option
objTarget.options[0] = null;
}
}
//Checks for an equivalent option in the target select
function has_option(strTargetId, objOption){
// get a handle to the target select
var objTarget = document.getElementById(strTargetId);
for(var i = 0; i < objTarget.options.length; i++){
//loop through all the options
if(objTarget.options[i].value == objOption.value){
//if the value of the option is the same
if(objTarget.options[i].text == objOption.text){
//and the text of the option is the same
//consider it a match
return true;
}
}
}
return false;
}
</script>
</head>
<body>
<table>
<tr>
<td valign="top" align="center">
<select name="fullList"
id="fullList"
multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
<option value="7">Option 7</option>
<option value="8">Option 8</option>
<option value="9">Option 9</option>
<option value="10">Option 10</option>
</select>
</td>
<td valign="middle" align="center">
<button onclick="add_selected('fullList', 'partList');">></button><br/>
<button onclick="add_all('fullList', 'partList');">>></button><br/>
<button onclick="remove_selected('partList');"><</button><br/>
<button onclick="remove_all('partList');"><<</button><br/>
</td>
<td valign="top" align="center">
<select name="partList"
id="partList"
multiple="multiple">
</select>
</td>
</tr>
</table>
</body>
</html>
