Bootstrap Multiselect-单击/将侦听器更改为选项

问题描述 投票:0回答:2

请看下面我的例子。如何添加单击或更改侦听器,以提醒更改/单击的选项的值(例如)。

$(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" data-img="100/109">AAA</option>
      <option value="tomatoes" data-img="100/108">BBB</option>
      <option value="mozarella" data-img="100/107">CCC</option>
      <option value="mushrooms" data-img="100/106">DDD</option>
      <option value="pepperoni" data-img="100/105">EEE</option>
      <option value="onions" data-img="100/110">FFF</option>
    </select>

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

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

  </div>

</form>

例如如果我选择AAA,则应提醒“奶酪”,如果我随后选择BBB,则应提醒“西红柿”

jsfiddle

javascript jquery twitter-bootstrap bootstrap-multiselect
2个回答
1
投票

您可以执行类似的操作来处理点击/更改

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

0
投票

请用$(".chkveg option").change(function() {更改$(".chkveg").change(function() {

[JSFiddle:https://jsfiddle.net/w5ts1qc3/

哦,最后但并非最不重要:我已经将https添加到davidstutz.de资产中>

© www.soinside.com 2019 - 2024. All rights reserved.