Как обновить максимальные параметры bootstrap-select в зависимости от другого списка выбора

Пользователь выбирает в двух списках выбора количество строк и столбцов для настройки сетки, скажем, 2x3. В третьем списке выбора пользователь может выбрать максимум 6, не более.

Максимум 6 зависит от выбора перед 2x3. Я не получаю значение 6 в атрибуте data-max-options selectpicker. Возможно ли вообще обновить этот атрибут в зависимости от двух других входных данных?

Было бы хорошо использовать выбор начальной загрузки snapappointments из Github. Но можно вернуться к простому 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.info("number" + grid);
    });
    // $('#grid').data('max-options', 6); // this works, but not inside above function
</script>

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

Как конвертировать HTML в PDF с помощью jsPDF
Как конвертировать HTML в PDF с помощью jsPDF
В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.
0
0
2 432
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вы должны «обновить» экземпляр 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.info("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/[email protected]/dist/css/bootstrap-select.min.css" rel = "stylesheet" />
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/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>

jQuery изменяет слова через дефис на camelCase (jquery получает атрибуты данных HTML 5 с дефисами и чувствительностью к регистру), поэтому вам, возможно, придется использовать что-то немного другое (это то, что сработало для меня)

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

Это включает в себя некоторые другие методы selectpicker, которые мне нужны: 1) убедитесь, что никакие параметры не были выбраны 2) установить количество максимальных опций (опять же, обратите внимание, что в коде это «maxOptions») 3) обновить селектпикер 4) установить выбранные элементы как активные

Использование этого позволило выбрать различные параметры в моем коде, которые изменили «количество» — если установлено значение 1, то selectpicker действует так, как будто у него нет «несколько» — если установлено любое другое число, то это максимум.

Работал отлично, когда все вещи были установлены на свои места. Надеюсь, это поможет!

Другие вопросы по теме