Question

用户在两个选择列表中选择行数和列数来设置网格，比方说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/

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将带连字符的单词更改为camelCase（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）设置最大选项计数（再次，在代码中注意它是“ maxOptions”） 3）刷新选择器 4）将selectedItems设置为活动

使用此选项，可以在代码中选择更改“计数”的各种选项-如果设置为1，则selectpicker的行为就好像它没有“整数”-如果设置为任何其他数字，则为最大值。

所有事情放好后，效果很好。希望这会有所帮助！

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

2 个答案: