Reputation: 5337
I'm trying to create multiple selectize
select menu's dynamically, by pressing the plus icon.
Please test the code below, the problem is that if I comment out this line
selectize_init(select_class, options, results);
from addOrRemoveSelectContainer
function, everything will be cloned correctly but selectize
will stop working. You won't be able to select anything
If I leave this line
selectize_init(select_class, options, results);
Then duplicate select menus will be created and only one of them works.
I have tried using
$(className).selectize({...})
instead of
$(className).last().selectize({...})
But the problem wasn't fixed. And I don't want to use maxItems: null
and enable multi-select because each select menu has other options related to that specific selection.
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>
Upvotes: 1
Views: 151
Reputation: 734
The solution in my case was described in the comment above.
$('#CONTROL_ID').last().remove()
Upvotes: 0