如何从 Bootstrap 多个选择器中获取选定的值？

Question

这是我的select 元素，它具有multiple 属性；

<select id="dd-personnels" onchange="personnelChange()" asp-items="Model.Personnels" multiple data-max-options="1" class="form-control form-control-sm selectpicker"></select>

这是我从上面的select 初始化selectpicker 的代码；

$('.selectpicker').selectpicker({ liveSearch: true });

如何在选择的onchange 中获取选定的值？

Answer 1

即使内联事件处理程序是一种不好的做法，您也需要向内联添加两个关键字：

<select id="dd-personnels" onchange="personnelChange(this, event)" ....

现在你的功能是：

function personnelChange(ele, event) {
   var val = $(ele).selectpicker('val');
   console.log(val);
}

详情可以关注documentation

sn-p：

function personnelChange(ele, event) {
    var val = $(ele).selectpicker('val');
    console.log(val);
}

 $('#dd-personnels').selectpicker({
    liveSearch: true
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>0
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>

<select id="dd-personnels" onchange="personnelChange(this, event)" asp-items="Model.Personnels" multiple data-max-options="1" class="form-control form-control-sm selectpicker">
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Barbecue</option>
</select>