javascript - 如何使用js或j查询根据外部值限制selectpicker多选
问题描述
我想根据 Group member Count 值动态更改最大可选值。我在 selectpicker 插件中对多个部分使用多项选择
这是我的表格
<div class="form-group has-label">
<label>
Contact No
<star class="star">*</star>
</label>
<input class="form-control" name="contact" id="contact" type="text" />
</div>
<div class="form-group has-label">
<label>
Group member count
<star class="star">*</star>
</label>
<input class="form-control" onchange="count();" name="memcount" id="memcount" type="number" />
</div>
<div class="form-group has-label">
<label>
Select Members
<star class="star">*</star>
</label>
<select multiple data-title="Select Members" name="members" id="members" class="selectpicker" data-style="btn-default btn-outline" data-menu-style="dropdown-blue">
<option value="1">value 1</option>
<option value="2">value 1</option>
<option value="3">value 1</option>
<option value="4">value 1</option>
</select>
</div>
我不知道如何使用 javascript 限制选择。请帮忙。
解决方案
您应该使用 SELECT 属性“data-max-options”并在每次更改此属性的值时刷新选择选择器。这是一个简单的例子:https ://jsfiddle.net/Denisdude/jzk0fsc2/8/
$(document).ready(function () {
$('#memcount').on('change', function (e) {
var count = parseInt($(this).val());
// set limit to SELECT tag
if (count > 0) {
$('#members').data('max-options', count)
}
// here you can remove extra values from SELECT
var values = $('#members').val();
if (values.length > count) {
// how many items we need to remove
var toRemove = values.length - count;
$('#members option:selected').each(function (index, item) {
if (toRemove) {
var option = $(item);
option.prop('selected', false);
toRemove--;
}
});
}
// update selectpickers
$('.selectpicker').selectpicker('refresh');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></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/i18n/defaults-*.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js"></script>
<div class="form-group has-label">
<label>
Contact No
<star class="star">*</star>
</label>
<input class="form-control" name="contact" id="contact" type="text" />
</div>
<div class="form-group has-label">
<label>
Group member count
<star class="star">*</star>
</label>
<input class="form-control" value="1" name="memcount" id="memcount" type="number" min="1" />
</div>
<div class="form-group has-label">
<label>
Select Members
<star class="star">*</star>
</label>
<!-- data-max-options="1" -->
<select multiple data-title="Select Members" data-max-options="1" name="members" id="members" class="selectpicker" data-style="btn-default btn-outline" data-menu-style="dropdown-blue">
<option value="1">value 1</option>
<option value="2">value 2</option>
<option value="3">value 3</option>
<option value="4">value 4</option>
<option value="2">value 5</option>
<option value="3">value 6</option>
<option value="4">value 7</option>
<option value="2">value 8</option>
<option value="3">value 9</option>
<option value="4">value 10</option>
</select>
</div>
推荐阅读
- python - python子进程“OSError:[WinError 6]句柄无效”错误
- snowflake-cloud-data-platform - 在 Snowflake 中的 INFORMATION_SCHEMA 中创建自定义视图或表时权限不足
- javascript - 让javascript音频组件重新加载
- list - 如何计算列表中周围字符串的数量?
- go - 如何处理 GRPC Golang 高 CPU 使用率
- sql - 如何修复将负值传递给 LEFT() 的错误
- python - 矩形对象在pygame的一个栏中聚集在一起
- c# - 如何在 C# Winform 应用程序中的表单之间传递裁剪的图片?
- python - 无法从 MainFrame(ttk.Frame) 类中关闭 tkinter 应用程序:
- java - Android 应用程序在从蓝牙 GPS 设备获取数据时速度变慢