获得所选的选项选择二

Question

我使用这个选择菜单中选择2工作的单值：

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

，这是我的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); 
}); 

我想追加格式化的文件清单我在select2中进行选择时的方式。我试图得到所选择的选项的值，但是当我如上所示执行时，我得到了select2中所有值的数组。什么是最好的方式，我只需要点击一个单一的值，然后将其附加到文档列表中，并且“tr data-value”是该选择的值。

任何帮助表示赞赏，谢谢！

Answer 1

选择二不哈已经，让你加入该元素的特定事件，但你可以使用select2:selecting事件和data从您点击具体的元素：

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

相反的：

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

你可以使用：

e.params.args.data.text 

我的例子：

$("#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>