我需要根据另一个选择的更改事件来更改多个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

10-05 21:01
查看更多