获取bootstrap-select中的当前值
Get the current value in bootstrap-select
我使用 e.target.value
从 bootstrap-select 中检索了当前的 selected 值,但它返回了第一个 selected 值,即警报一直显示项目 1,当项目 1 和项目 2 selected 即使项目 2 最近 selected.
如何获取最近 selection 的值以及如何获取 selected 的选项数量?
<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);
});
我觉得这样回答可能更容易理解:
$('#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
如果您在列表中 select "item1" 和 "item2",则输出将为“1,2”。
代替e.target.value
,您可以使用$(this).find("option:selected").text();
$('.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>
根据 this post,你应该这样做:
$('.selectpicker').on('changed.bs.select', function (e) {
var selected = e.target.value;
});
$('.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
});
这是解决方案:
$('#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);
});
这就是我如何从 select 列表中获取 selected 项目的值:
var e = document.getElementById("field_ID");
var selected_value = e.options[e.selectedIndex].value;
在您的情况下,您需要取值。我使用 jQuery 来帮助解决这个问题:
$('.selectpicker').change(function (e) {
alert($(e.target).val());
});
我的解决方案可能会对某人有所帮助
选项值并不总是与文本相同
$('.selectpicker').on('changed.bs.select', function () {
let val = $(this).siblings('.btn.dropdown-toggle').attr('title');
console.log(val);
});
$('.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>
经过我的尝试,我发现有两种方法可以获取当前选中的值。
$('.selectpicker').selectpicker('val')
在office文档中,它只说通过 $('.selectpicker').selectpicker('val', [0, 1]); 设置值;所以我猜 .selectpicker('val') 会 return 选择 val。我尝试了一下,它有效。
- 在事件监听函数中使用
$(this).val()
,正如@Mirza Obaid 提到的
$('.selectpicker').on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue) { const selectedVal = $(this).val(); }
我使用 e.target.value
从 bootstrap-select 中检索了当前的 selected 值,但它返回了第一个 selected 值,即警报一直显示项目 1,当项目 1 和项目 2 selected 即使项目 2 最近 selected.
如何获取最近 selection 的值以及如何获取 selected 的选项数量?
<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);
});
我觉得这样回答可能更容易理解:
$('#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
如果您在列表中 select "item1" 和 "item2",则输出将为“1,2”。
代替e.target.value
,您可以使用$(this).find("option:selected").text();
$('.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>
根据 this post,你应该这样做:
$('.selectpicker').on('changed.bs.select', function (e) {
var selected = e.target.value;
});
$('.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
});
这是解决方案:
$('#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);
});
这就是我如何从 select 列表中获取 selected 项目的值:
var e = document.getElementById("field_ID");
var selected_value = e.options[e.selectedIndex].value;
在您的情况下,您需要取值。我使用 jQuery 来帮助解决这个问题:
$('.selectpicker').change(function (e) {
alert($(e.target).val());
});
我的解决方案可能会对某人有所帮助
选项值并不总是与文本相同
$('.selectpicker').on('changed.bs.select', function () {
let val = $(this).siblings('.btn.dropdown-toggle').attr('title');
console.log(val);
});
$('.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>
经过我的尝试,我发现有两种方法可以获取当前选中的值。
$('.selectpicker').selectpicker('val')
在office文档中,它只说通过 $('.selectpicker').selectpicker('val', [0, 1]); 设置值;所以我猜 .selectpicker('val') 会 return 选择 val。我尝试了一下,它有效。- 在事件监听函数中使用
$(this).val()
,正如@Mirza Obaid 提到的$('.selectpicker').on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue) { const selectedVal = $(this).val(); }