LEFT TO RIGHT MULTIPLE SELECT BOX AN EASY WAY

Here is the javascript to select multiple options from left multiple to right multiple selection box


//////////////////////////////////// SAMPLE HTML /////////////////////////////////////


<table width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<td>
<div style="font-size:12px;color:#999999">Applicable Courses </div>
</td>
<td><div style="font-size:12px;color:#999999"></div> </td>
<td><div style="font-size:12px;color:#999999">Selected Courses </div> </td>
</tr>
   <tr >
    <td>

    <select name="left-select" id="left-select" size="5" multiple="multiple" style="width:150px; font-size:12px;color:#999999;">
    <?php
if($action!='Edit'){

foreach($result_course_reservations as $key=>$data){
$course=$data['chrCourseCode'];
?>
    <option value="<?php echo  $data['intAutoNo']; ?>"<?php if($intCourseReservID==$data['intAutoNo']){ echo "selected"; } ?>><?php echo $course; ?></option>
    <?php }
}else{
foreach($result_course_reservation as $key=>$data){
$course=$data['chrCourseCode'];
?>
   <option value="<?php echo  $data['intAutoNo']; ?>"<?php if($intCourseReservID==$data['intAutoNo']){ echo "selected"; } ?>><?php echo $course; ?></option>
    <?php }
} ?>


    </select>

    </td>
    <td style="padding-right:20px;text-align:center">
    <a onclick="sendSelectedOptions();" onmouseout="selectAll('right-select',true)" style="cursor:pointer;" title="Add"> <strong>>></strong> </a>
    <br/>
    <a onclick="removeSelectedOptions();" style="cursor:pointer;" title="Remove All"> <strong><<</strong> </a>
<br />
 <a onclick="selectAll('right-select',true)" style="cursor:pointer; font-size:13px"> <strong>Confirm</strong> </a>
    </td>
    <td>
    <select name="right-select[]" id="right-select" size="5" multiple="multiple"  style="width:150px; font-size:12px;color:#999999;"></select>
    </td>
  </tr>
</table>



////////////////////MULTIPLE SELECTION BOX :JQUERY  SCRIPT ////////////////////////////////////

function sendSelectedOptions(){
    $("select#left-select option:selected").each(function () {
               var o1 = new Option($(this).text(),$(this).val());
  var position = $(this).attr("rel");
               o1.setAttribute("rel",position);
               $("select#right-select").append(o1);
    });

    $("select#left-select option:selected").remove();

    sortDropDownListByText('right-select');

}

function removeSelectedOptions(){
    $("select#right-select option:selected").each(function () {
               var o1 = new Option($(this).text(),$(this).text());
               var position = $(this).attr("rel");
               o1.setAttribute("rel",position);

               $("select#left-select").append(o1);
    });

    $("select#right-select option:selected").remove();
    sortDropDownListByText('left-select');

}

function sortDropDownListByText(selectID) {
    // Loop for each select element on the page.
    $("select#"+selectID).each(function() {

        // Keep track of the selected option.
        var selectedValue = $(this).val();

        // Sort all the options by text. I could easily sort these by val.
        $(this).html($("option", $(this)).sort(function(a, b) {
            return a.text == b.text ? 0 : a.text < b.text ? -1 : 1
        }));

        // Select one option.
        $(this).val(selectedValue);
    });
}




function selectAll(selectBox,selectAll) {
    // have we been passed an ID

    if (typeof selectBox == "string") {
        selectBox = document.getElementById(selectBox);
    }

    // is the select box a multiple select box?
    if (selectBox.type == "select-multiple") {
        for (var i = 0; i < selectBox.options.length; i++) {
            selectBox.options[i].selected = selectAll;
        }
    }
}