如何根据另一个选择列表更新引导选择的最大选项答案

【问题标题】：how to update bootstrap-select's max-options depending on another select list如何根据另一个选择列表更新引导选择的最大选项
【发布时间】：2019-05-09 23:40:37
【问题描述】：

用户在两个选择列表中选择行数和列数来设置网格，比如 2x3。在第三个选择列表中，用户最多只能选择 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/

【问题讨论】：

标签： jquery bootstrap-select bootstrap-selectpicker

【解决方案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>

【讨论】：

【解决方案2】：

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

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

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

使用此选项可以在我的代码中选择更改“计数”的各种选项 - 如果设置为 1，则 selectpicker 就像没有“多个”一样 - 如果设置为任何其他数字，那么这是最大值。

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

【讨论】：