我试图创建多个selectize
选择菜单的动态,按加号图标。
请测试下面的代码,问题是,如果我注解掉这一行,
selectize_init(select_class, options, results);
字符串
从addOrRemoveSelectContainer
函数中,所有内容都将正确克隆,但selectize
将停止工作。您将无法选择任何内容
如果我离开这条线
selectize_init(select_class, options, results);
型
然后,将创建重复的选择菜单,只有一个工作。
的数据
我试过用
$(className).selectize({...})
型
而不是
$(className).last().selectize({...})
型
但是这个问题并没有得到解决,而且我不想使用maxItems: null
并启用多选,因为每个选择菜单都有与该特定选择相关的其他选项。
var audiences_value = []
let audiences = [
{id: 1, title: 'foo'},
{id: 2, title: 'bar'},
{id: 3, title: 'foobar'},
{id: 4, title: 'baz'}
];
function addOrRemoveSelectContainer(
btn,
action,
container,
select_class,
options,
results
) {
var $selectContainer = $(btn).parent(container);
if (action == "add") {
var $clone = $selectContainer.last().clone();
$selectContainer.last().after($clone);
// NOTE: if you comment out the line below
// selectize_init(select_class, options,results);
// The select field will be cloned correctly
// but you cannot select anything
selectize_init(select_class, options, results);
} else if (action == "remove") {
if ($(container).length > 1) {
$selectContainer.remove();
}
}
}
function selectize_init(className, options, results) {
$(className)
.last()
.selectize({
maxItems: 1,
valueField: "title",
labelField: "title",
searchField: "title",
options: options,
create: true,
onChange: function (tenant) {
results.push(tenant);
},
});
return results;
}
audiences_value = selectize_init(".audiences", audiences, audiences_value)
.select-label,
.select {
display: inline-block;
}
.select {
width: 20rem;
}
.selectize-control {
margin: 2em;
}
.select-container {
display: block;
}
.add-row,
.remove-row {
border: 0;
margin-left: 3px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/js/bootstrap.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/js/selectize.min.js" integrity="sha512-IOebNkvA/HZjMM7MxL0NYeLYEalloZ8ckak+NDtOViP7oiYzG5vn6WVXyrJDiJPhl4yRdmNAG49iuLmhkUdVsQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/css/selectize.default.min.css" integrity="sha512-pTaEn+6gF1IeWv3W1+7X7eM60TFu/agjgoHmYhAfLEU8Phuf6JKiiE8YmsNC0aCgQv4192s4Vai8YZ6VNM6vyQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="select-container audiences-container">
<select class="select audiences" required></select>
<button type="button" class="add-row bg-success text-white" onclick="addOrRemoveSelectContainer(this, 'add', '.audiences-container', '.audiences', audiences, audiences_value)"><i class="fas fa-plus"></i></button>
<button type="button" class="remove-row bg-danger text-white" onclick="addOrRemoveSelectContainer(this ,'remove', '.audiences-container')"><i class="fas fa-minus"></i></button>
</div>
1条答案
按热度按时间xriantvc1#
在我的情况下的解决方案在上面的评论中描述。
$('#CONTROL_ID').last().remove()