Обновление одной начальной загрузки для нескольких

Question

Мне нужно изменить несколько атрибутов начальной загрузки-выбора в зависимости от события изменения другого выбора, но он не обновляется должным образом. Элемент 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>