Select2 是一个 jQuery 插件,用于替换原生的 select 元素,提供搜索、远程数据集、无限滚动等功能。在 Select2 中,默认情况下是不允许选择重复值的。但是,如果你想允许用户选择重复的值,可以通过自定义实现。
以下是一个使用 Select2 库允许多选重复值的示例:
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
multiple
属性以支持多选:<select id="mySelect" multiple>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="apple">Apple</option>
<option value="orange">Orange</option>
</select>
$(document).ready(function() {
$('#mySelect').select2();
// 监听 select2:select 事件
$('#mySelect').on('select2:select', function(e) {
// 获取选中的选项
var selectedOption = e.params.data;
// 将选中的选项添加回选项列表
var option = $('<option>', {
value: selectedOption.id,
text: selectedOption.text
});
// 将新选项插入到 select 元素的末尾
$('#myText').append(option);
});
});
这样,当用户选择一个选项时,该选项将被添加回选项列表,从而允许用户选择重复的值。请注意,这种方法可能会导致性能问题,特别是在处理大量数据时。在实际应用中,请根据需求进行优化。
领取专属 10元无门槛券
手把手带您无忧上云