如何根据另一个 select 列表更新 bootstrap-select 的最大选项

Question

一个用户 select 在两个 select 列表中设置网格的行数和列数，比方说 2x3。在第三个 select 列表中，用户最多只能 select 6 个，不能更多。

最多 6 个取决于 2x3 之前的选择。我没有将 6 的值输入到 selectpicker 的 data-max-options 属性中。这甚至可以根据其他两个输入更新此属性吗？

使用来自 Github 的 snapappointments 的 bootstrap-select 就可以了。但是回退到普通 jquery 可以得到它运行。也许 data-max-options 属性不会在脚本运行期间更新，已在其他问题中阅读过此内容，但不幸的是我对此经验不多，因此非常感谢任何提示。

<select class="grid rows">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>
<select class="grid cols">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>
<input type="text" id="max" title="just demo" />
<select id="grid" size="10" multiple="multiple" class="selectpicker show-tick" data-max-options="2">
    <option>01</option>
    <option>02</option>
    <option>03</option>
    <option>04</option>
    <option>05</option>
    <option>06</option>
    <option>07</option>
    <option>08</option>
    <option>09</option>
    <option>10</option>
</select>
<script type="text/javascript">
    $(".grid").change(function (event) {
        var rows = $(".grid.rows option:selected").val();
        var cols = $(".grid.cols option:selected").val();
        var grid = rows * cols;
        if (grid == 0) {
            $('#max').val('');
        } else {
            $('#max').val(grid);
        }
        console.log("number" + grid);
    });
    // $('#grid').data('max-options', 6); // this works, but not inside above function
</script>

https://jsfiddle.net/statjsfd/6zfxh4go/4/

Answer 1

您必须 'refresh' 属性更改后的 selectpicker 实例。

$(".grid").change(function(event) {
  var rows = $(".grid.rows option:selected").val();
  var cols = $(".grid.cols option:selected").val();
  var grid = rows * cols;
  if (grid == 0) {
    $('#max').val('');
  } else {
    $('#max').val(grid);
  }
  console.log("number" + grid);
  
  // The trick is to 'refresh' the selectpicker instance
  $('#grid').data('max-options', grid).selectpicker('refresh');;
  
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js"></script>


<select class="grid rows">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>
<select class="grid cols">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>
<input type="text" id="max" title="just demo" />
<select id="grid" size="10" multiple="multiple" class="selectpicker show-tick" data-max-options="2">
  <option>01</option>
  <option>02</option>
  <option>03</option>
  <option>04</option>
  <option>05</option>
  <option>06</option>
  <option>07</option>
  <option>08</option>
  <option>09</option>
  <option>10</option>
</select>

Answer 2

jQuery 将带连字符的单词更改为驼峰式 (jquery get HTML 5 Data Attributes with hyphens and Case Sensitivity)，因此您可能需要使用一些不同的东西（这对我有用）

$("#id").selectpicker('deselectAll').data('maxOptions',count).selectpicker('refresh').selectpicker('val', selectedItems);

这包括我需要的其他一些选择器方法： 1）确保没有选择任何选项 2) 设置最大选项数（同样，在代码中注意它是 'maxOptions'） 3）刷新选择器 4) 将 selectedItems 设置为 active

使用它允许在我的代码中选择各种选项，这些选项已更改 'count' - 如果设置为 1，则 selectpicker 就像没有 'multiple' - 如果设置为任何其他数字，那么是最大值。

一切就绪后，效果很好。希望这对您有所帮助！

如何根据另一个 select 列表更新 bootstrap-select 的最大选项

how to update bootstrap-select's max-options depending on another select list

jquery

bootstrap-select

bootstrap-selectpicker