获取bootstrap-select中的当前值

时间:2017-01-25 04:28:27

标签: javascript jquery twitter-bootstrap html-select bootstrap-select

我使用e.target.value从bootstrap-select中检索当前选定的值,但它返回了第一个选定的值,即警报保持显示第1项,当第1项和第2项选中时,即使第2项是最多的最近入选。

如何获取最近选择的值以及如何选择多少选项?

   <select multiple class="selectpicker" multiple data-selected-text-format="count > 1">
    <option value="item 1">Item 1</option>
    <option value="item 2">Item 2</option>
    <option value="item 3">Item 3</option>
    <option value="item 4">Item 4</option>
    <option value="item 5">Item 5</option>

$('.selectpicker').change(function (e) {
    alert(e.target.value);
});

9 个答案:

答案 0 :(得分:22)

我认为答案可能更容易理解:

&#13;
&#13;
$('#empid').on('click',function() {
  alert($(this).val());
  console.log($(this).val());
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<select id="empid" name="empname" multiple="multiple">
  <option value="0">item0</option>
  <option value="1">item1</option>
  <option value="2">item2</option>
  <option value="3">item3</option>
  <option value="4">item4</option>
</select>
<br />
Hold CTRL / CMD for selecting multiple fields
&#13;
&#13;
&#13;

如果您选择&#34; item1&#34;和&#34; item2&#34;在列表中,输出将是&#34; 1,2&#34;。

答案 1 :(得分:12)

而不是e.target.value,您可以使用$(this).find("option:selected").text();

$('.selectpicker').change(function () {
    var selectedItem = $(this).find("option:selected").val();
    alert(selectedItem);
});
<select multiple class="selectpicker" multiple data-selected-text-format="count > 1">
   <option value="item 1">Item 1</option>
   <option value="item 2">Item 2</option>
   <option value="item 3">Item 3</option>
   <option value="item 4">Item 4</option>
   <option value="item 5">Item 5</option>
</select>

答案 2 :(得分:7)

$('.selectpicker').on('change', function(){
    var selected = []
    selected = $('.selectpicker').val()
    console.log(selected); //Get the multiple values selected in an array
    console.log(selected.length); //Length of the array
});

答案 3 :(得分:4)

根据this post,您应该执行以下操作:

$('.selectpicker').on('changed.bs.select', function (e) {
    var selected = e.target.value;
});

答案 4 :(得分:2)

这是解决方案:

$('#payment_method').on('hidden.bs.select', function (e) {
  // console.log(e.target.value);

  console.log(e.target.selectedOptions.length);

$.each( e.target.selectedOptions , function( index, obj ){
    console.log(obj.value);
});

});

您可以获得选择的长度,因此可能有助于for循环

console.log(e.target.selectedOptions.length);

您也可以遍历所选的值:

$.each( e.target.selectedOptions , function( index, obj ){
    console.log(obj.value);
});

答案 5 :(得分:1)

在您的情况下,您需要取值。我使用jQuery来解决这个问题:

$('.selectpicker').change(function (e) {
    alert($(e.target).val());
});

答案 6 :(得分:0)

这是我从选择列表中获取所选项目的值的方法:

var e = document.getElementById("field_ID");  
var selected_value = e.options[e.selectedIndex].value;

答案 7 :(得分:0)

我的解决方案可能会对某人有所帮助

选项值并不总是与文本相同

$('.selectpicker').on('changed.bs.select', function () {
    let val = $(this).siblings('.btn.dropdown-toggle').attr('title');
    console.log(val);
});

答案 8 :(得分:0)

 $('.selectpicker').change(function () {
        var selectedItem = $('.selectpicker').val();
        alert(selectedItem);
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>


<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js"></script>


<select class="selectpicker" multiple data-selected-text-format="count > 1">
    <option value="1">Item 1</option>
    <option value="2">Item 2</option>
    <option value="3">Item 3</option>
    <option value="4">Item 4</option>
    <option value="5">Item 5</option>
</select>