Bootstrap Multiselect - add on click/change listener to options

Question

Please look at my example below. How can I add a click or change listener which alerts the value and id of the changed/clicked option (just for example).

$(function() {

  $('.chkveg').multiselect({
    includeSelectAllOption: true,
    enableHTML: true,
    optionLabel: function(element) {
        return '<img src="https://placekitten.com/'+ $(element).attr('data-img')+'"> '+ $(element).text();
    },
  });

  $(".chkveg option").change(function() {
      alert($(this).val());
  });

  $('#btnget').click(function() {
    alert($('#chkveg').val());
  });
});

.multiselect-container>li>a>label {
  padding: 4px 20px 3px 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://davidstutz.de/bootstrap-multiselect/docs/js/bootstrap-3.3.2.min.js"></script>
<link href="http://davidstutz.de/bootstrap-multiselect/docs/css/bootstrap-3.3.2.min.css" rel="stylesheet"/>
<link href="http://davidstutz.de/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" rel="stylesheet"/>
<script src="http://davidstutz.de/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<form id="form1">

  <div style="padding:20px">

    <select class="chkveg" multiple>
      <option value="cheese" id="AAA" data-img="100/109">AAA</option>
      <option value="tomatoes" id="BBB" data-img="100/108">BBB</option>
      <option value="mozarella" id="CCC" data-img="100/107">CCC</option>
      <option value="mushrooms" id="DDD" data-img="100/106">DDD</option>
      <option value="pepperoni" id="EEE" data-img="100/105">EEE</option>
      <option value="onions" id="FFF" data-img="100/110">FFF</option>
    </select>

    <select class="chkveg" multiple>
      <option value="cheese2" id="AAA2" data-img="100/109">AAA2</option>
      <option value="tomatoes2" id="BBB2" data-img="100/108">BBB2</option>
      <option value="mozarella2" id="CCC2" data-img="100/107">CCC2</option>
      <option value="mushrooms2" id="DDD2" data-img="100/106">DDD2</option>
      <option value="pepperoni2" id="EEE2" data-img="100/105">EEE2</option>
      <option value="onions2" id="FFF2" data-img="100/110">FFF2</option>
    </select>
    
    <br /><br />

    <input type="button" id="btnget" value="Get Selected Values" />

  </div>

</form>

e.g. if I select AAA it should alert "cheese" and id "AAA", if I then select BBB it should alert "tomatoes" and id "BBB"

jsfiddle

Answer 1

I figured it out. You have to use the onChange function from the multiselect.

$('.chkveg').multiselect({
    enableHTML: true
    ,optionLabel: function(element) {
        return '<img src="https://placekitten.com/'+ $(element).attr('data-img')+'"> '+ $(element).text();
    }
    ,onChange : function(option, checked) {

        alert(option.attr("id"));
        alert(option.val());
    }
});

Full Example:

$(function() {


  $('.chkveg').multiselect({
      enableHTML: true
      ,optionLabel: function(element) {
          return '<img src="https://placekitten.com/'+ $(element).attr('data-img')+'"> '+ $(element).text();
      }
      ,onChange : function(option, checked) {

          alert(option.attr("id"));
          alert(option.val());
      }
  });

  $(".chkveg option").change(function() {
      alert($(this).val());
  });

  $('#btnget').click(function() {
    alert($('#chkveg').val());
  });
});

.multiselect-container>li>a>label {
  padding: 4px 20px 3px 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://davidstutz.de/bootstrap-multiselect/docs/js/bootstrap-3.3.2.min.js"></script>
<link href="http://davidstutz.de/bootstrap-multiselect/docs/css/bootstrap-3.3.2.min.css" rel="stylesheet"/>
<link href="http://davidstutz.de/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" rel="stylesheet"/>
<script src="http://davidstutz.de/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<form id="form1">

  <div style="padding:20px">

    <select class="chkveg" multiple>
      <option value="cheese" id="AAA" data-img="100/109">AAA</option>
      <option value="tomatoes" id="BBB" data-img="100/108">BBB</option>
      <option value="mozarella" id="CCC" data-img="100/107">CCC</option>
      <option value="mushrooms" id="DDD" data-img="100/106">DDD</option>
      <option value="pepperoni" id="EEE" data-img="100/105">EEE</option>
      <option value="onions" id="FFF" data-img="100/110">FFF</option>
    </select>

    <select class="chkveg" multiple>
      <option value="cheese2" id="AAA2" data-img="100/109">AAA2</option>
      <option value="tomatoes2" id="BBB2" data-img="100/108">BBB2</option>
      <option value="mozarella2" id="CCC2" data-img="100/107">CCC2</option>
      <option value="mushrooms2" id="DDD2" data-img="100/106">DDD2</option>
      <option value="pepperoni2" id="EEE2" data-img="100/105">EEE2</option>
      <option value="onions2" id="FFF2" data-img="100/110">FFF2</option>
    </select>
    
    <br /><br />

    <input type="button" id="btnget" value="Get Selected Values" />

  </div>

</form>