获取所选选项 Select2 的单个值

Question

我在这个 select 菜单上使用 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);
});

当 selection 在 select2 中创建时，我正在尝试附加一个按照我的格式设置的文档列表。我正在尝试获取选项 selected 的值，但是当我按照上面的方式进行操作时，我得到了 select2 中所有值的数组。对我来说，在单击时仅获得一个值的最佳方法是什么，该值又将附加到文档列表中，其中 "tr data-value" 仅是 selection 的值。

感谢任何帮助，谢谢！！！

Answer 1

而不是：

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

Answer 2

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>

获取所选选项 Select2 的单个值

Getting single value of selected option Select2

javascript

jquery

jquery-select2

jquery-select2-4

select2