Jquery 多选插件 - 打印 div 中的选定内容

Question

我正在使用 jquery 多选插件，如果选择了一个选项，我希望它立即打印在选择框下方的 div 中。

Link to Plugin site

我在插件网站上看到过这个，但不知道如何实现它:

检索所有选定的值？

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();

任何帮助/指导将不胜感激。 提前致谢

我的代码:

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

您可以使用.multiselect("getChecked")获取选中的项目。这将返回一个数组，然后您可以循环遍历该数组并从中提取各个值:

var output = [];

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

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

如果您希望实时更新，您可以绑定(bind)到点击事件:

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