Dynamische Auswahloption mit select2 funktioniert nicht

In meiner Seite habe ich eine Auswahloption mit select2 und einer Schaltfläche, um eine neue Auswahloption dynamisch zur Seite hinzuzufügen. Aber ich habe ein Problem mit einer neuen Steuerung, die dynamisch mit der Schaltfläche erstellt wird, ich kann sie nicht mehr wie die Originalsteuerung auswählen. Ich versuche immer noch, es zu lösen, aber es könnte großartig sein, wenn Sie mir eine Hand geben, danke im Voraus!Dynamische Auswahloption mit select2 funktioniert nicht

<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>

Hier ist my fiddle

Quelle

2016-08-02 Duc Doan

Eine bessere Lösung, bevor das erste Element zu klonen sein wird, dann nach jedem anhängen wir das select2 Plugin

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(); 
    });

Quelle

2016-08-02 04:32:04 madalinivascu

Sie reinitiate danken für Ihre Hilfe, aber es funktioniert nur, wenn Sie zum ersten Mal auf ".add-report" klicken, ab dem zweiten Mal funktionieren die Steuerelemente nicht G. –

ja, das neue Steuerelement funktioniert, aber die vorherigen Steuerelemente funktionieren nicht mehr –

Ich kann nicht mehr als 2 Steuerelemente hinzufügen –

Dynamische Auswahloption mit select2 funktioniert nicht

Antwort

Verwandte Themen