我需要根据另一个选择的更改事件来更改多个bootstrap-select属性,但是它不能正确刷新。 select元素已在DOM而不是按钮tho上成功更新。
这是代码:
的HTML
<select class="selectpicker" title="-- Select an event" id="eventType">
<option value="1">Appointment</option>
<option value="2">Videocall</option>
<option value="3">Multiconference</option>
</select>
<select class="selectpicker" title="-- Select a user" id="userList">
<option value="1">User 1</option>
<option value="2">User 2</option>
<option value="3">User 3</option>
<option value="4">User 4</option>
<option value="5">User 5</option>
<option value="6">User 6</option>
<option value="7">User 7</option>
</select>
JS
$('#eventType').change(function () {
var $userList = $('#userList');
if (this.value == 3) {
// If type 3 is selected enable multiselect
$userList
.attr('title', '-- Select max. 5 users')
.attr('multiple', true)
.data('max-options', 5)
} else {
// Single select
$userList
.attr('title', '-- Select a user')
.attr('multiple', true)
.data('max-options', 1)
}
$userList.selectpicker('refresh');
});
DOM
<select class="selectpicker form-control" title="-- Select max. 5 users" id="userList" tabindex="-98" multiple="multiple"></select>
<button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" role="combobox" aria-owns="bs-select-2" aria-haspopup="listbox" aria-expanded="false" data-id="userList" title="-- Select a user">...</button>
最佳答案
我对您的代码进行了一些更改以使其正常工作:
如果您始终希望选择multiple
,而只是将最大选项更改为1,则每次更改实际上都没有必要做.attr('multiple', true)
。由于某种原因,它只会使事情变得混乱。只需在模板中将其设置为multiple
即可。那解决了您提出的问题。
更改时,重置userList
的值。这将使事情变得更加清晰和容易。
使用$userList.selectpicker({title: '...'})
更改标题,因为使用.attr
只是行不通
这是一个完整的Plunker:
https://plnkr.co/edit/SpSeaHTnfILDdndwpABt?p=preview