Bootstrap-select -如何在更改多个时触发事件

Question

我有这样的情况：

我无法获取引导选择的选定值-使用multiple=true我只能获取第一个项目？所以，当我第一次选择Mustard时，我得到了"Mustard“的警告，但当我在那个番茄酱之后选择时，我仍然得到了"Mustard"？

如何获取上次选中或取消选中的项的值？

​

$(function() {

  $('.selectpicker').on('change', function(){
    var selected = $(this).find("option:selected").val();
    alert(selected);
  });
  
});

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.js"></script>

<select class="selectpicker" multiple="true">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

​

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.js"></script>

<select class="selectpicker" multiple="true">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

Answer 1

代码中的问题是$(this).find("option:selected").val()

正如@Guruprasad Rao所说，不需要循环，只需删除上面一行中的.find("option:selected")

​

$(function() {

  $('.selectpicker').on('change', function(){
    var selected = $(this).val();
    alert(selected);
  });
  
});

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.js"></script>

<select class="selectpicker" multiple="true">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

​

如果您想要选择最后一个元素，那么可以使用array并存储在其中选择的元素

Answer 2

当有多个时，您可能需要遍历options selected。对于ex，如下所示：

​

$(function() {

  $('.selectpicker').on('change', function(){
    var selected = []; //array to store value
    $(this).find("option:selected").each(function(key,value){
        selected.push(value.innerHTML); //push the text to array
    });
    alert(selected);
  });
  
});

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.js"></script>

<select class="selectpicker" multiple="true">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

​