javascript - 获取所选选项 Select2 的单个值

Question

我在这个选择菜单上使用 select2:

<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 数据值”仅是该选择的值。

感谢任何帮助，谢谢!!!

Answer 1

Select2 没有为您提供已添加元素的特定事件，但您可以使用 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>