动态选择使用选项选择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不工作

回答

相关问题