jquery SelectizeJs:动态生成选择菜单时创建重复的选择菜单

des4xlb0  于 5个月前  发布在  jQuery
关注(0)|答案(1)|浏览(69)

我试图创建多个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>
xriantvc

xriantvc1#

在我的情况下的解决方案在上面的评论中描述。
$('#CONTROL_ID').last().remove()

相关问题