Функция динамического выбора с использованием select2 не работает

На моей странице у меня есть одна опция выбора с помощью select2 и кнопка для динамического добавления новой опции выбора на страницу. Но у меня проблема с новым элементом управления, который динамически создается кнопкой, я больше не могу его выбирать, как оригинальный элемент управления. Я все еще пытаюсь решить это, но это может быть здорово, если вы дадите мне руку, спасибо заранее!Функция динамического выбора с использованием select2 не работает

<html> 
 
<head> 
 
\t <title></title> 
 
\t <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
 
\t <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" /> 
 
\t <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> 
 
\t <script type="text/javascript"> 
 
\t jQuery(function($) 
 
\t { 
 
\t \t var $body = $('body'); 
 

 
\t \t $('.sl-select').select2(); 
 

 
\t \t $body.on('click', '.add-report', function() 
 
\t \t { 
 
\t \t \t var $this = $(this), 
 
\t \t \t \t $clone = $this.siblings('.report:last').clone(); 
 

 
\t \t \t $clone.insertBefore($this); 
 
\t \t }); 
 
\t }); 
 
\t </script> 
 
</head> 
 
<body> 
 
\t <div class="report"> 
 
\t \t <select class="sl-select"> 
 
\t \t \t <option value="1">option 1</option> 
 
\t \t \t <option value="2">option 2</option> 
 
\t \t \t <option value="3">option 3</option> 
 
\t \t </select> 
 
\t </div> 
 
\t <button class="add-report">Add Report</button> 
 
</body> 
 
</html>

Вот my fiddle

источник

2016-08-02 Duc Doan

Лучшим решением будет клонировать первый элемент раньше, то после каждого добавления мы возобновляем в ВЫБ.2 плагин

var $body = $('body'); 
var $clone = '<div class="report"><select class="sl-select"><option value="1">option 1</option><option value="2">option 2</option><option value="3">option 3</option></select></div>' 
    $('.sl-select').select2(); 

    $body.on('click', '.add-report', function() 
    { 

     var $this = $(this); 
    $body.prepend($clone); 


    $('.sl-select:first').select2(); 
    });

источник

2016-08-02 04:32:04 madalinivascu

спасибо за ваша помощь, но она работает только тогда, когда вы нажимаете '.add-report' в первый раз, со второго раза, элементы управления не работают г. –

да, новый элемент управления работает, но предыдущие элементы управления перестали работать –

Я не могу добавить более двух элементов управления –

Функция динамического выбора с использованием select2 не работает

ответ

Смежные вопросы