как обновить max-параметры bootstrap-select в зависимости от другого списка выбора - PullRequest
Новая
       32

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

0 голосов
/ 10 мая 2019

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

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

Использование bootstrap-select из 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.log("number" + grid);
    });
    // $('#grid').data('max-options', 6); // this works, but not inside above function
</script>

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

1 Ответ

0 голосов
/ 10 мая 2019

Вам необходимо «обновить» экземпляр 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>
...