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>