Erste Einzelwert ausgewählter Option Select2

Question

ich arbeite mit select2 auf diesem Auswahlmenü:

<select id="documents" name="documents[]" class="form-control" multiple=""> 
    <option value="1">My first document</option> 
    <option value="2">This is my second document</option> 
    <option value="3">This is my third document</option> 
</select> 

Und das ist mein js:

$('#documents').on("select2:selecting", function(e) { 
    var documentSelected = $("#documents").select2("val"); 
    var documentListCreate = 
    '<tr data-value='+documentSelected+'>' + 
    '<td width="30px">' + 
    '<button type="button" class="btn btn-default btn-xs delete-doc"><i class="fa fa-times"></i></button>' + 
    '</td>' + 
    '<td width="50px">' + 
    '<a href="../samples/sample.pdf" target="_blank"><img style="margin-bottom:10px;" class="document-icon" src="..img/pdf_icon.png"></a>' + 
    '</td>' + 
    '<td>' + 
    '<a class="nounderlink" href="../samples/sample.pdf" target="_blank">Document_455.pdf<br><span class="text-muted">Description of document</span></a>'+ 
    '</td>' + 
    '</tr>'; 
    $("#document-list").append(documentListCreate); 
}); 

Ich versuche, eine Liste der Dokumente anhängen formatiert Mein Weg, wenn eine Auswahl in select2 getroffen wird. Ich versuche, den Wert der Option zu erhalten, aber wenn ich es wie oben gezeigt mache, bekomme ich ein Array aller Werte in der Auswahl2. Was ist der beste Weg für mich, nur diesen einen einzigen Wert beim Klicken zu erhalten, der wiederum an die Liste der Dokumente angehängt wird, wobei der "tr-Wert" nur der Wert dieser Auswahl ist.

Jede Hilfe wird geschätzt, danke !!!

Answer 1

Select2 nicht ha ve ein bestimmtes Ereignis, das Ihnen das Element gibt, das hinzugefügt wurde, aber Sie können das select2:selecting Ereignis und die data aus dem spezifischen Elemente verwenden, die Sie auf geklickt haben:

$(document).ready(function() { 
 
    $("#documents") 
 
    .select2() 
 
    .on("select2:selecting", function(e) { 
 
     item = $(e.params.args.originalEvent.toElement).data('data') 
 
     console.log("The item that was clicked is '"+item.text+"' and the value of the item is '"+item.id+"'"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" /> 
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> 
 
<select id="documents" name="documents[]" class="form-control" multiple=""> 
 
    <option value="1">My first document</option> 
 
    <option value="2">This is my second document</option> 
 
    <option value="3">This is my third document</option> 
 
</select>

Answer 2

Statt:

$("#documents").select2("val") 

können Sie verwenden:

e.params.args.data.text 

Mein Beispiel:

$("#documents").select2(); 
 
$('#documents').on("select2:selecting", function(e) { 
 
    var documentSelected = e.params.args.data.text; 
 
    console.log(documentSelected); 
 
    var documentListCreate = '<tr data-value="'+documentSelected+'">' + 
 
     '<td width="30px">' + 
 
     '<button type="button" class="btn btn-default btn-xs delete-doc"><i class="fa fa-times"></i></button>' + 
 
     '</td>' + 
 
     '<td width="50px">' + 
 
     '<a href="../samples/sample.pdf" target="_blank"><img style="margin-bottom:10px;" class="document-icon" src="..img/pdf_icon.png"></a>' + 
 
     '</td>' + 
 
     '<td>' + 
 
     '<a class="nounderlink" href="../samples/sample.pdf" target="_blank">Document_455.pdf<br><span class="text-muted">Description of document</span></a>'+ 
 
     '</td>' + 
 
     '</tr>'; 
 
    $("#document-list").append(documentListCreate); 
 
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> 
 

 
<select id="documents" name="documents[]" class="form-control" multiple=""> 
 
    <option value="1">My first document</option> 
 
    <option value="2">This is my second document</option> 
 
    <option value="3">This is my third document</option> 
 
</select> 
 

 
<table id="document-list"> 
 
    <tbody> 
 

 
    </tbody> 
 
</table>