Jquery 多选插件 - 在 div 中选择打印

Question

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

Link to Plugin site

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

检索所有选定的值？

最简单的方法是在选择框上调用 val()：

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

同样可以使用多选 API 来完成。调用 getChecked 方法并映射一个新数组：

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

如果您希望它实时更新，您可以绑定到点击事件：

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