如何從 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>

這是我的代碼， selectpicker從上面的select初始化一個selectpicker ；

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

如何在 select 的onchange中獲取選定的值？

Answer 1

即使內聯事件處理程序是一種不好的做法，您也需要向內聯添加兩個關鍵字：

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

現在你的功能是：

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

有關詳細信息，您可以查看文檔

片段：

 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>