在 bootstrap-select 中获取当前值

Posted 2023-03-05

【中文标题】在 bootstrap-select 中获取当前值

【英文标题】：Get the current value in bootstrap-select

【发布时间】：2017-06-10 03:35:22

【问题描述】：

我使用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);
);

【参考方案1】：

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

【参考方案2】：

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

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

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

【参考方案3】：

你可以使用$(this).find("option:selected").text();代替e.target.value

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

【讨论】：

这不是真的，因为在许多情况下，值与文本不同，无论如何，在我的情况下！

是的，你是对的。两者并不总是必须相同

【参考方案4】：

在您的情况下，您需要获取价值。我使用 jQuery 来帮助解决这个问题：

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

【参考方案5】：

这就是我从选择列表中获取所选项目值的方式：

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

【参考方案6】：

这是解决方案：

$('#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);
);

【参考方案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
);

【参考方案8】：

根据this post，您应该执行以下操作：

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

【参考方案9】：

我认为这样的答案可能更容易理解：

$('#empid').on('click',function() 
  alert($(this).val());
  console.log($(this).val());
);

<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

如果您在列表中选择“item1”和“item2”，输出将为“1,2”。

【讨论】：

我正在获取所有选定的值或文本，我只想拥有当前选定的值，而不是当我单击“item2”时的“item 1 item 2”。

代码将只产生当前选择的值，如果它是一个它会显示 1 如果它的倍数它将显示全部

是的，设置了多个，如何获取最后点击的值？

您的问题是获取当前选定的值？现在你问的是最后选择的值吗？

当前选择的值。和上次点击的值一样，不是吗？