User Rated at:
Rate This:
Select a rating... 5 .. Best 4 3 .. Average 2 1 .. Worst

I have seen this type of script requested a lot on the forums. Hope somebody can make use of it.

Browsers: IE5+

<!---Head--->
<script language="javascript" type="text/javascript">
<!--//
    function cmdAddLeftBoxToRight_onclick()
    {
             AddRemoveButtons(document.FormName.elements("lstBoxLeft"), document.FormName.elements("lstBoxRight"));
    }

    //--------------------------------------------------


    function cmdAddRightBoxToLeft_onclick()    {
             AddRemoveButtons(document.FormName.elements("lstBoxRight"), document.FormName.elements("lstBoxLeft"));
    }

    //----------------------------------------------------

    function AddRemoveButtons(paramFromListbox, paramToListbox){
    
        // declare varables and set the initial value of the boolean variable
        var intCounter;
        var intCounter2;
        var blnInRightListAlready = false;
        var arrComboValues = new Array();
                        
        // ** Check if an option/entry has been selected int the from listbox, if so carry out the following ...
        if (paramFromListbox.selectedIndex>=0)
        {

            // ** Set up a loop to go through all of the options in the from listbox
            for(intCounter=0;intCounter<paramFromListbox.options.length; intCounter++)
            {            
                // ** For each of these options, check if it is selected (this loop accounts for a multi-select option)
                if(paramFromListbox.options[intCounter].selected == true)
                {    
                    var oOption = document.createElement('OPTION');
                    oOption.text = paramFromListbox.options[intCounter].text;
                    oOption.value = paramFromListbox.options[intCounter].value;                    
                        
                    // ** Set up a loop to go through all of the options in the to listbox
                    for(intCounter2=0; intCounter2<paramToListbox.options.length-1; intCounter2++)
                    {
                        // ** If any of the options in the to box, match one of the curently selected options in the from listbox.
                        if (paramToListbox.options[intCounter2].text == paramFromListbox.options[intCounter].text)
                        {
                            // Set the value of the boolean variable to indicate that a matching value was found,
                            // then break out of this if statement.
                            blnInRightListAlready = true;
            
                            break;
                        }
                    }
                    
                    // If the entry in the from listbox matches one of those in the to listbox already, carry out the below
                    if (blnInRightListAlready == false)
                    {
                        // ** copy the selected <option> over from the from listbox into the to one
                        paramToListbox.add(oOption);
                    }
                    
                    // Remove the from listbox entry regardless of whether or not it was added to the right, then
                    // Reset the counter as every entry or <option> removed makes the from listbox reload and therefore the 
                    // remaining entries indexes decrease by 1.
                    paramFromListbox.options.remove(intCounter);
                    
                    intCounter = intCounter-1;
                }
                
            }
                
            // ** loop through all the left listbox entries and put the text and value entries into an array
            for (intCounter=0; intCounter<paramToListbox.options.length;intCounter++)
            {
                arrComboValues[intCounter] = new Array()
                arrComboValues[intCounter][0] = paramToListbox.options[intCounter].text;
                arrComboValues[intCounter][1] = paramToListbox.options[intCounter].value;
            }
                
            // ** Sort the array
            arrComboValues.sort()
                        
            // ** Now delete the entries shown in the to listbox already
            paramToListbox.options.length=0;
        
            // ** Finally, populate the to listbox again with the sorted array values
            for (intCounter=0; intCounter<arrComboValues.length;intCounter++)
            {
                // ** Create the <option> element to put into the to listbox
                // ** with the text and value of this option taken from the array entries.
                var oOption = document.createElement('OPTION');                    
                oOption.text = arrComboValues[intCounter][0];
                oOption.value = arrComboValues[intCounter][1];
                    
                // ** add this <option> to the to listbox
                paramToListbox.add(oOption);
            }

        }
    }
    //-->
</script>

<title>Sample Listbox App !!!</title>

<!---Body--->

<form Name="FormName">
<table border="0">
    <tr>
        <td>
            <select Name="lstBoxLeft" Multiple Style='Width:50px;height:100px'>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
       </td>
       <td>
           <select Name="lstBoxRight" Multiple Style='Width:50px;height:100px'>
               <option>A</option>
               <option>B</option>
               <option>C</option>
               <option>D</option>
               <option>E</option>
          </select>
       </td>
    </tr>
    <tr>
        <td colspan="2">
        <input type="Button" Name="cmdAddLeftBoxToRight" Value="Add" OnClick="javascript: cmdAddLeftBoxToRight_onclick()">
        &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
        <input type="Button" Name="cmdAddRightBoxToLeft" value="Remove" OnClick="javascript: cmdAddRightBoxToLeft_onclick()">
        </td>
    </tr>
</table>
</form>