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

score 1 · Accepted Answer · answered Nov 18 '19 at 13:33

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>

Jatin Parmar · Answer 2 · 2019-11-18T12:54:13.863

0

you can do something like this to handle click/change

a function to get id from value

function getID(value){
   let ids={
   cheese:"AAA",
   tomatoes:"BBB",
   mozarella:"CCC",
   mushrooms:"DDD",
   pepperoni:"EEE",
   onions:"FFF",
   cheese2:"AAA2",
   tomatoes2:"BBB2",
   mozarella2:"CCC2",
   mushrooms2:"DDD2",
   pepperoni2:"EEE2",
   onions2:"FFF2"
   }
return ids[value];

}

 $(":checkbox").click((e)=>{
  console.log("value ",e.target.value);
  console.log("checked ",e.target.checked)
console.log("id",getID(e.target.value));
})

edited Nov 18 '19 at 12:54

answered Nov 18 '19 at 12:05

Jatin Parmar

2,759
5
20
31

I have to mark this as unsolved again. How can I get the ID of the option? I tried `e.target.id` without success. – Black Nov 18 '19 at 12:41
@Black you get value on click so using that value you can easily get id – Jatin Parmar Nov 18 '19 at 12:47
@Jatinparmar, ok thats a possible solution and I could generate the ID's serverside. But I will only solve it like this if there is no better solution. Thanks. – Black Nov 18 '19 at 13:15

Andrew · Answer 3 · 2019-11-18T13:40:05.273

-1

$(".chkveg").change(function() {
      let opts = $(this).find("option:selected");
      let last = opts.last();
      alert(last.val() +  " : " + last.attr("id"));
  });

Please check the updated Fiddle here: https://jsfiddle.net/t05sa63y/1/

edited Nov 18 '19 at 13:40

answered Nov 18 '19 at 11:56

Andrew

373
2
15

Then it shows all values at once. E.g. if I select AAA then it alerts "cheese" but if I then select BBB then it alerts "cheese, tomatoes" instead of only "tomatoes" – Black Nov 18 '19 at 11:58
it seems like you don't understand the problem. – Black Nov 18 '19 at 12:01
Does not work, if you deselect it, then it shows `undefined: undefined`. Or if you select AAA, then CCC and then BBB it shows CCC, because CCC is the last. Check my answer to see how it should be done. – Black Nov 18 '19 at 13:45
https://stackoverflow.com/questions/8149532/how-to-get-the-last-selected-option-from-a-multiselect – Andrew Nov 18 '19 at 14:02

Bootstrap Multiselect - add on click/change listener to options

3 Answers3