如何为多选中的每个选项添加事件处理程序？答案

【问题标题】：How to add event handler for every option in multiselect?如何为多选中的每个选项添加事件处理程序？
【发布时间】：2014-05-18 16:05:22
【问题描述】：

我正在使用 jQuery 多选 (jquery.multiselect.js)。 html标记是这样的：

    <select id ="dtDomain" title="Basic example" multiple="multiple" name="example-basic" size="3" style="width:160px">
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
    </select>

我如何使用以下代码来初始化多选：

$(function(){
   $("#dtDomain").multiselect({
       noneSelectedText: "select Ranges",
       checkAllText: "select all",
       uncheckAllText: 'select none',
       selectedList:4,
       minWidth:100
    });
});

现在我想为every<option>添加事件处理程序，当<option>被选中或取消选中时，事件处理程序将被触发。为了实现这一点，我尝试了以下代码：

 //get the checked option and print them
 $('#dtDomain').on('change', function () {
    var array_of_checked_values = this.multiselect("getChecked").map(function(){
        return this.value; 
    }).get();
    alert(array_of_checked_values )

 })

但是上面的代码效果不好，好像这种方式无法捕捉到事件。谁能给点建议？谢谢！

【问题讨论】：

多选会有可用的事件
@EhsanSajjad 有活动吗？我没有找到合适的活动。有什么建议吗？
您需要在插件的 api 中工作，而不是在 <select> 上使用更改处理程序。如果插件不提供事件访问权限，请使用其他插件提供

标签： javascript jquery multi-select

【解决方案1】：

试试这个：

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

$("#dtDomain").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);
   }
});

检查如下：

http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/#callbacks

【讨论】：