javascript - Select2 multiple 无法正常工作

Question

我有多个选择下拉列表，应该将所选项目添加为数据表中的行，并在未选择项目时将它们从数据表中删除。它看起来像这个图像。 .当我想添加在第一次选择之前的其他列时是可以的，但是当想要的列在第一次选择之后时这是不可能的。 . .我的脚本中有这段代码。

$('#displayInTable').select2({
  placeholder: "Display in table",
  allowClear: true
});
$('#displayInTable').change(function() {

  table = $("#analysisTable").DataTable();
});

$('#displayInTable').on('select2:select', function() {
  //table.column(0).visible(true);
  var selected_value = $('#displayInTable').val();
  table.column(selected_value).visible(true);
}).trigger('change');

$('#displayInTable').on("select2:unselecting", function(e) {
  var unselected_value = $('#displayInTable').val();
  table.column($(this).val()).visible(false);
}).trigger('change');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" />

<select class="form-control select2" multiple="multiple" id="displayInTable" data-placeholder="Display in table" style="width: 100%;">
  <option value="4">e-mail</option>
  <option value="5">web</option>
  <option value="6">bill</option>
  <option value="7">savings</option>
  <option value="8">status</option>
</select>

数据占位符也不起作用。

Answer 1

使用 e.params.data.id 获取选中或未选中选项的值，因为 $('#displayInTable').val() 返回值每个选定的选项。还可以使用取消选择事件而不是取消选择。

$('#displayInTable').select2({
  placeholder: "Display in table",
  allowClear: true
});
$('#displayInTable').change(function() {
  table = $("#analysisTable").DataTable();
});

$('#displayInTable').on('select2:select', function(e) {
  var selected_value = Number(e.params.data.id);
  table.column(selected_value).visible(true);
});

$('#displayInTable').on("select2:unselect", function(e) {
  var unselected_value = Number(e.params.data.id);
  table.column(unselected_value).visible(false);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" />

<select class="form-control select2" multiple="multiple" id="displayInTable" data-placeholder="Display in table" style="width: 100%;">
  <option value="4">e-mail</option>
  <option value="5">web</option>
  <option value="6">bill</option>
  <option value="7">savings</option>
  <option value="8">status</option>
</select>