Get the value of the "option" that was clicked either to select/deselect

Question

I have the following <select>:

<select id="multiselect" multiple="multiple">
  <option value="pedra">Pedra</option>
  <option value="papel">Papel</option>
  <option value="tesoura">Tesoura</option>
</select>

With the Jquery code below, I can get the value of the last <option> selected:

<script type="text/javascript">
  $(document).ready(function() {
    $('#multiselect').multiselect();

    $(document).on('change','#multiselect', function(){

        console.log (( $('option', this).filter(':selected:last').val() ))
    });
  });
</script>

But what I really wanted was to get the value of <option> clicked (know that on('click', func..) will not work in this case), regardless of whether it is being selected or deselected.

I did a lot of research, but the most I could find was how to find the value of the last selected.

The plugin used is the Bootstrap-multiselect

Answer 1

Try to use it like this:

$('#multiselect').multiselect();
$("#multiselect").on("multiselectclick", function (event, ui) {
    console.log(ui.value);
});

Example

I found this in the documentation:

$("#multiselect").on("multiselectclick", function(event, ui) {
  /* event: the original event object
     ui.value: value of the checkbox
     ui.text: text of the checkbox
     ui.checked: whether or not the input was checked or unchecked (boolean)
  */
});

Answer 2

To achieve the effect you expect, you need to put a Handler for each element option:

$("#multiselect").on("click", "option", function() {
    var clickedOption = $(this);
    alert(clickedOption.val());
});

Example of code in operation:

http://jsfiddle.net/ryNFE/2/

Example with console.log (without Alert):

$("#multiselect").on("click", "option", function() {
    var clickedOption = $(this);
    console.log(clickedOption.val());
});

Answer 3

RESOLVED

Guys, thanks for your attention. The plugin I’m using is the Bootstrap-Multiselect. I do not know if there is a more elegant and better solution, but, I managed to solve so:

 $(document).ready(function() {
  $('#multiselect').multiselect({
    onChange: function(element, checked) {
      console.log(element[0]['value']);
    }
  });
});