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

Question

A user selects in two select-lists number of rows and cols to setup a grid, let's say 2x3. In a third select-list the user can only select a maximum of 6, not more.

The max of 6 depends on choice before 2x3. I don't get the value of 6 into the selectpicker's data-max-options attribute. Is this even possible to update this attribute depending on two other inputs?

Using snapappointments's bootstrap-select from Github would be fine. But fallback to plain jquery is ok to get it run. Maybe data-max-options attribute isn't to be updated during script run, have read this in other questions but unfortunately I'm not that much experienced with that so any hint highly appreciated.

<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/

score 0 · Accepted Answer · answered May 10 '19 at 00:02

You have to 'refresh' the selectpicker instance after the attribute change.

$(".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>

score 0 · Answer 2 · answered Dec 04 '19 at 15:57

jQuery changes hyphenated words to camelCase (jquery get HTML 5 Data Attributes with hyphens and Case Sensitivity) so you may have to use something a bit different (this is what worked for me)

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

This includes some other selectpicker methods as I needed to: 1) make sure no options were selected 2) set the max-options count (again, note in the code it is 'maxOptions') 3) refresh the selectpicker 4) set the selectedItems as active

Using this allowed selecting various options in my code that changed 'count' - if set to 1, then selectpicker acts as if it has no 'multiple' - if set to any other number, then that is the maximum.

Worked great once all the things were set in place. Hopes this helps!

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

2 Answers2