Question

我遇到这种情况：

我无法获得具有multiple = true的bootstrap-select的选定值我只能得到第一项？所以，当我第一次选择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

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

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

Answer 2

您的代码中的问题是$(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>

如果你想要选择最后一个元素，那么你使用数组并存储在其中选择的元素

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

2 个答案: