将单个引导选择更新为多个答案

【问题标题】：Updating a single bootstrap-select to multiple将单个引导选择更新为多个
【发布时间】：2019-11-24 21:32:56
【问题描述】：

我需要根据另一个选择的更改事件更改多个引导选择属性，但它不能正确刷新。 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>

$('#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>

【问题讨论】：

标签： javascript twitter-bootstrap bootstrap-select

【解决方案1】：

我已对您的代码进行了几处更改以使其正常工作：

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

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

【讨论】：