javascript - 将单个 Bootstrap 选择更新为多个

Question

我需要根据另一个选择的更改事件更改多个 Bootstrap 选择属性，但它无法正确刷新。 select 元素已在 DOM 上成功更新，但按钮没有更新。

这是代码:

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>

Answer 1

我对您的代码进行了一些更改以使其正常工作:

1. 如果您总是想要multiple 选择，但只是将最大选项更改为 1，那么执行 .attr('multiple', true) 确实没有意义每一次改变。由于某种原因，它只会把事情搞砸。只需在模板中将其设置为multiple即可。这样就解决了你提出的问题。
2. 更改时，重置 userList 的值。这将使事情变得更清晰、更容易。
3. 使用 $userList.selectpicker({title: '...'}) 更改标题，因为使用 .attr 不起作用

这是一个完整的工作 Plunker: https://plnkr.co/edit/SpSeaHTnfILDdndwpABt?p=preview