Как динамически дублировать тег select, который преобразуется в select2.js? - PullRequest
Новая
       8

Как динамически дублировать тег select, который преобразуется в select2.js?

0 голосов
/ 20 февраля 2019

Я пытаюсь использовать select2 в моем проекте.

На следующем снимке экрана я хочу дублировать раздел социальных сетей (включая select2, input и remove btn) динамически после того, как пользователь нажимает на кнопку ADD More:

enter image description here

Чтобы избежать конфликта, я вызываю destroy событие для всех select2 в начале события клика.Затем я буду дублировать элементы.Затем я заново инициализирую select2.Но он всегда будет просто конвертировать один выбор в select2.

На следующем снимке экрана вы можете увидеть, что дублированные выборки не конвертируются в select2:

enter image description here

Следующий фрагмент кода показывает проблему: 

<!doctype html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
</head>
<body>
<button onclick="duplicate_select();">duplicate</button>
<br/><br/>
<select class="selection" name="state">
  <option value="AL">Alabama</option>
  <option value="WY">Wyoming</option>
</select>

<script>
$(document).ready(function() {
    $('.selection').select2();
});

function duplicate_select ()
{
    //Destroy all active select2
    $(".selection").each(function (index, value) {
        var temp_selecte2 = $(value).select2();
        temp_selecte2.select2('destroy');
    });

    //Get First Select Node that I want to duplicate
    var first_node = $('.selection').first().prop('outerHTML');
    
    //Add new node to the body
    $('body').append(first_node);
    
    
    //Re-initialize all select2
    $(".selection").each(function (index, value) {
        var temp = $(value).select2();
        //temp.select2();
    });
    
    //Following codes is not working too
    //$(".selection").select2();
}
</script>

</body>
</html>

Подскажите, пожалуйста, как мне решить эту проблему и повторно инициализировать все дублированные элементы выбора?

1 Ответ

0 голосов
/ 20 февраля 2019

Проблема возникает из-за того, что Select2 требует, чтобы тег select был уникальным, метод select2() определяет это с помощью атрибута с именем data-select2-id, единственное, что вам нужно сделать, - это изменить этот атрибут.

Ваша проблема может быть исправлена ​​путем удаления атрибута или установки уникального.Чтобы установить уникальный, просто добавьте строку temp.attr('data-select2-id', new Date().getTime()), но рекомендуется удалить ее temp.removeAttr('data-select2-id')

<!doctype html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
</head>
<body>
<button onclick="duplicate_select();">duplicate</button>
<br/><br/>
<select class="selection" name="state">
  <option value="AL">Alabama</option>
  <option value="WY">Wyoming</option>
</select>

<script>
$(document).ready(function() {
    $('.selection').select2();
});

function duplicate_select ()
{
    //Destroy all active select2
    $(".selection").each(function (index, value) {
        var temp_selecte2 = $(value).select2();
        temp_selecte2.select2('destroy');
    });

    //Get First Select Node that I want to duplicate
    var first_node = $('.selection').first().prop('outerHTML');
    
    //Add new node to the body
    $('body').append(first_node);
    
    
    //Re-initialize all select2
    $(".selection").each(function (index, value) {
        var temp = $(value);
        temp.removeAttr('data-select2-id');
        // temp.attr('data-select2-id', new Date().getTime()); // <-- this works too
        temp.select2();
    });
}
</script>

</body>
</html>
...