如何根据另一个选择列表更新bootstrap- select的max-options

<select id="mainSelect">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

<select id="subSelect" class="selectpicker" multiple data-max-options="3">
  <option value="1">Sub Option 1</option>
  <option value="2">Sub Option 2</option>
  <option value="3">Sub Option 3</option>
</select>

$(document).ready(function() {
  $('#mainSelect').change(function() {
    var selectedValue = $(this).val();
    var maxOptions = 0;

    // 根据选择的值更新max-options
    if (selectedValue === '1') {
      maxOptions = 3;
    } else if (selectedValue === '2') {
      maxOptions = 5;
    } else if (selectedValue === '3') {
      maxOptions = 10;
    }

    // 更新子列表的max-options
    $('#subSelect').selectpicker('destroy');
    $('#subSelect').attr('data-max-options', maxOptions);
    $('#subSelect').selectpicker('refresh');
  });
});

$(document).ready(function() {
  $('.selectpicker').selectpicker();
});