我正在使用Select2(v3.5.2)并尝试允许用户从多个下拉列表中选择一个或多个值。
想象一下这个简单的伪html标记:
<select class='select2' multiple>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
和jQuery:
$(document).ready(function() {
$('.select2').select2();
});
默认功能只允许选择选项(A,B,C)一次,在我的场景中,我需要用户能够多次选择相同的选项,以便可以实现以下选项:
A,A,A,B,C
A,B,B,B,C,C
A,A,A,B,B,C,C,C
etc...
从我的搜索开始,它似乎不受版本3.5.2支持,但有些帖子提到版本4.0.x支持它。
但是,我找不到任何关于v4的文档,而且我还是宁愿不升级到4。
有谁知道如何使其适用于版本3(或4)?
答案 0 :(得分:3)
正如您所提到的,似乎在版本4.0中修复了选择多个类似值的功能,但我在文档中找不到对它的引用。所以我必须使用// Add a listener for port connections
chrome.runtime.onConnect.addListener(function(port) {
// If there is a 'getCoins' connection coming in...
if(port.name == "getCoins") {
// ...add a listener that is called when the other side posts a message on the port.
port.onMessage.addListener(function(msg) {
port.postMessage(_playerCoins);
});
}
}
3.2v框架编写功能。
如果你仔细观察渲染的DOM,你会发现select2基本上添加了类select2
,并在你从下拉列表中选择一个项目时移除了类select2-disabled
,所以交易是添加select2-result-selectable
回来。
select2-result-selectable
答案 1 :(得分:0)
我找到了 4.0 的解决方案。这个解决方案不是最好的,但它是有效的。抱歉我的英语不好!
$("#periodos").on("select2:select",function(e){
e.preventDefault();
let limite_periodos = $("#schemas").val().length;
var element = e.params.data.element;
var $element = $(element);
$element.detach();
$(this).append($element);
$(this).trigger("change");
$("#periodos").append('<option value="'+e.params.data.text+'">' +e.params.data.text + '</option>');
$('#periodos').trigger('select2:close');
return true;
});
$('#periodos').on('select2:unselect',function(event){
var detect = false;
var element = event.params.data.text;
var selections = $('#periodos').select2('data');
var el = event.params.data.element;
var $el = $(el);
$el.detach();
});
$('#periodos').on('select2:close',function(event){
var select = document.getElementById("periodos");
var options = [];
document.querySelectorAll('#periodos > option').forEach(
option => options.push(option)
);
while (select.firstChild) {
select.removeChild(select.firstChild);
}
options.sort((a, b) => parseInt(a.innerText)-parseInt(b.innerText));
for (var i in options) {
select.appendChild(options[i]);
}
});