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 data-value”只是该选择的值。

感谢任何帮助，谢谢！

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

2 个答案: