How to add event handler for every option in multiselect?

Question

I am using jQuery multiselect (jquery.multiselect.js). The html markup is like this:

    <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>

And I how use the following code to init the multiselect:

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

Now I want to add event handler for every <option> ,the event handler will be triggered when the <option> is selected or unselected. In order to achieve this, I tried the following code:

 //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 )

 })

But the code above didn't works well, it seems that this way can't catch the event.Who can give some advice? Thank you !

Answer 1

Try this:

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

Check below:

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