SelectizeJs：动态生成选择菜单时会创建重复的选择菜单

Question

我正在尝试通过按加号图标动态创建多个

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>

Answer 1

我的案例的解决方案已在上面的评论中描述。

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