Lynob
Lynob

Reputation: 5337

SelectizeJs: duplicate select menus are being creacted when generating select menus dynamically

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.

enter image description here

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

Answers (1)

C&#233;sar Augusto
C&#233;sar Augusto

Reputation: 734

The solution in my case was described in the comment above.

$('#CONTROL_ID').last().remove()

Upvotes: 0

Related Questions