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

您需要将您的select初始化为 Select2，就像您对页面加载时存在的选择一样。 您的代码附加了一个新的select ，但它没有将其初始化为 Select2。

这是一个工作片段。 我已经为您的第一个基本select添加了一个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>