twitter-bootstrap Bootstrap-select - 如何在更改多个时触发事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32988458/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap-select - how to fire event on change multiple
提问by Cisse Desmet
i have this situation:
我有这种情况：
i cannot get the selected value of a bootstrap-select with multiple=true i can only get the first item? so, when i first select Mustard, i get the alert for "Mustard", but when i select after that Ketchup, i still get "Mustard"?
我无法通过 multiple=true 获得 bootstrap-select 的选定值，我只能获得第一项？所以，当我第一次选择芥末时，我会收到“芥末”的警报，但是当我在番茄酱之后选择时，我仍然会得到“芥末”？
How can i get the value of the last selected or deselected item?
如何获取最后选择或取消选择的项目的值？
$(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>
采纳答案by J Santosh
the issue in your code is $(this).find("option:selected").val()
您的代码中的问题是 $(this).find("option:selected").val()
As @Guruprasad Rao said there is no need of looping just remove .find("option:selected")in above line
正如@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>And if you want to get the last element selected then you have use array and store the element that is selected in it
如果你想选择最后一个元素，那么你必须使用数组并存储在其中选择的元素
回答by Guruprasad Rao
You might need to loop through options selectedwhen there are multiple. For ex as below:
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>