動態選擇使用選項選擇2不工作

在我的網頁，我一直在使用選擇2和一個按鈕來動態添加新的選擇選項頁面中選擇一個選項。但是我有一個是通過按鈕動態創建新的管理上的問題，我無法選擇它了像原來的控制。我還在努力解決這個問題，但如果你給我一隻手，提前感謝它可能是偉大的！動態選擇使用選項選擇2不工作

<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

謝謝你你的幫助，但是當你點擊'。新增-report'第一次，從第二次它才能正常運行，該控件不幹活G。 –

是，新的控制工作，但以前的控制停止工作 –

我無法添加超過2個控制 –

動態選擇使用選項選擇2不工作

回答

相關問題