Question

I am using jquery multiselect plugin, If an option has been selected i would like it to be instantly be printed in a div below the select box.

Link to Plugin site

I have seen this on the plugin site, but not sure how to implement it:

Retrieve all selected values?

The easiest way is to call val() on the select box:

var values = $("select").val();

The same can be accomplished using the multiselect API. Call the
getChecked method and map a new array:

var array_of_checked_values =
$("select").multiselect("getChecked").map(function(){    return
this.value;  }).get();

Any help/guidance would be greatly appreciated.
Thanks in advance

my code:

echo '<select name="tutor[]" id="tutor" multiple="multiple" size="5" class="required" title="Select Staff">';
$staff = get_records("user", "deleted", "0", "lastname ASC", "id,firstname,lastname,idnumber");
$sdenrolments=array($entry->enrolments);
$enrolled_staff = explode(",", $entry->enrolments);

foreach($staff as $tutor){  
if($tutor->id>1){
echo '<option value="'.$tutor->id.'"';
if(in_array($tutor->id, $enrolled_staff)) {echo 'selected="selected"';}
echo '>'.$tutor->lastname.' '.$tutor->firstname.'</option>';
}
}

Answer 1

You can get the checked items using .multiselect("getChecked"). This returns an array, which you can then cycle over and pull the individual values from:

var output = [];

$.each( $("select").multiselect("getChecked"), function(){
    output.push( $(this).attr("title") );
});

$("#myDiv").html( output.join(', ') );

If you wanted this to update in real-time, you could bind to the click event:

$("select").multiselect({
   click: function() {
      var output = [];
      $.each( $("select").multiselect("getChecked"), function(){
         output.push( $(this).attr("title") );
      });
      $("#myDiv").html( output.join(', ') );
   }
});