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;
}
}
}
