Пользователь выбирает в двух списках выбора количество строк и столбцов для настройки сетки, скажем, 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>
Вы должны «обновить» экземпляр 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 действует так, как будто у него нет «несколько» — если установлено любое другое число, то это максимум.
Работал отлично, когда все вещи были установлены на свои места. Надеюсь, это поможет!