JavaScript多个select2在单击事件中不工作

Question

我想单击按钮创建一个多个选择框（Select2）。

每个按钮单击将创建一个使用 select2 功能库的选择框。

我的代码只会出现一个简单的选择框。

 $('.main_select2').select2({
    placeholder: 'Selection Box',
    allowClear: true
  });
$('#add_select').on('click', function() {
    $('.for_select').append( 
    '<div class="c-input c-input--select c-input--icon">'
          + '<select class="select2 main_select2">'
          + '<option>Choose 1</option>'
          + '<option>Choose 2</option>'
          + '<option>Choose 3</option>'
          + '</select>'
      + '</div>');
  })

.main_select2{
  width:200px;
  margin-top:10px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.0.0/select2.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/2.1.0/select2.min.js"></script>

<button type="button" id="add_select">Add Select2</button>
<div class="for_select">
  <div class="c-input c-input--select c-input--icon">
      <select class="select2 main_select2">
          <option>Choose 1</option>
          <option>Choose 2</option>
         <option>Choose 3</option>
      </select>
  </div>
</div>

是否有任何可能的方法可以使用Select2中的多个类来完成此操作。

谢谢

Answer 1

您需要将选择作为select2初始化，就像在页面加载中存在的一样。您的代码附加新的选择，但它不会将其初始化为Select2。

这是一个工作片段。我在第一个，基本选择的情况下添加了hidden css类，因为您可能不希望看到该类别。

let count = 0;                         // Track how many copies we have
let $template = $('.c-input--select'); // The HTML you want to copy each time
let $container = $('.for_select');     // Where the copies should be added

$('#add_select').on('click', function() {

    // Increment our counter
    count++;

    // Create a copy of your base HTML/select
    let $copy = $template.clone();
    
    // Find the select in the div, and give it an id so we can find it
    $copy.find('select').attr('id', count);
 
    // Append it
    $container.append($copy);
    
    // Initialise it as a select2, using the id we just gave it to find it
    $('#' + count).select2();
});

.hidden {
    display: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.0.0/select2.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/2.1.0/select2.min.js"></script>

<button type="button" id="add_select">Add Select2</button>
<div class="for_select">
  <div class="c-input c-input--select c-input--icon">
      <!-- add hidden class so the template is not visible -->
      <select class="select2 main_select2 hidden">
          <option>Choose 1</option>
          <option>Choose 2</option>
         <option>Choose 3</option>
      </select>
  </div>
</div>