Bootstrap 多选 - 添加 click/change 监听选项

Question

请看我下面的例子。我如何添加点击或更改侦听器来提醒 changed/clicked 选项的值和 ID（仅作为示例）。

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

例如如果我 select AAA 它应该提醒 "cheese" 和 id "AAA"，如果我然后 select BBB 它应该提醒 "tomatoes" 和 id "BBB"

jsfiddle

Answer 1

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

请在此处查看更新后的 Fiddle：https://jsfiddle.net/t05sa63y/1/

Answer 2

你可以做这样的事情来处理click/change

从值中获取 id 的函数

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

Answer 3

我明白了。您必须使用多选中的 onChange 函数。

$('.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());
    }
});

完整示例：

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

Bootstrap 多选 - 添加 click/change 监听选项

Bootstrap Multiselect - add on click/change listener to options

javascript

jquery

twitter-bootstrap

bootstrap-multiselect