基于jQuery UI的多项选择下拉列表框组件 jQuery UI MultiSelect Widget

Callbacks & Events

Demonstrating beforeopen, open, beforeclose, close, click, checkall, uncheckall, and optgrouptoggle callbacks/events. Note that you can either pass in an event handler in the options object upon initialization, or bind to the event (including the multiselect prefix). For example, to add an "open" handler, you can also use $("select").bind("multiselectopen", fn);

Callback target

var $callback = $("#callback");

$("select").multiselect({
   click: function(event, ui){
      $callback.text(ui.value + ' ' + (ui.checked ? 'checked' : 'unchecked') );
   },
   beforeopen: function(){
      $callback.text("Select about to be opened...");
   },
   open: function(){
      $callback.text("Select opened!");
   },
   beforeclose: function(){
      $callback.text("Select about to be closed...");
   },
   close: function(){
      $callback.text("Select closed!");
   },
   checkAll: function(){
      $callback.text("Check all clicked!");
   },
   uncheckAll: function(){
      $callback.text("Uncheck all clicked!");
   },
   optgrouptoggle: function(event, ui){
      var values = $.map(ui.inputs, function(checkbox){
         return checkbox.value;
      }).join(", ");
      
      $callback.html("Checkboxes " + (ui.checked ? "checked" : "unchecked") + ": " + values);
   }
});