如何从select2 multiselect中的选项列表中删除所选选项,并按选择的顺序显示所选选项

Question

我在我的表单中有select2多选字段,我想在选中它后从下拉列表中删除所选选项,如果从列表中删除它,再次将其添加到列表中.此外,添加的项目应与选择的顺序相同.当前select2(4.0)不会删除所选项目,并且它按照它们在下拉列表中显示的顺序显示所选项目,而不是按选择顺序显示.

$(document).ready(function(){
    $('#dynamicAttributes').select2({
            allowClear: true,
            minimumResultsForSearch: -1,
            width: 600
     });
 });

JSFiddle:https://jsfiddle.net/rd62bhbm/

Answer 1

问的第1部分:

你可以像这样隐藏CSS技巧selected item:

.select2-results__option[aria-selected=true] {
    display: none;
}

问的第2部分:

你也可以做一个JQuery的伎俩,迫使selected items结束标签盒的,(通过获取上选择所选的项目,取下(删除),那么它reAppend到标签中,然后调用"变函数"来申请更改):

$("select").on("select2:select", function (evt) {
    var element = evt.params.data.element;
    var $element = $(element);
    $element.detach();
    $(this).append($element);
    $(this).trigger("change");
});

最后更新了JsFiddle,我希望它适合你,谢谢!

编辑#1

您可以Clear All Selected通过此调用(应用Null值):

$("#dynamicAttributes").val(null).trigger("change"); 

在按钮上:

$('#btnReset').click(function() {
    $("#dynamicAttributes").val(null).trigger("change"); 
});

更新了小提琴#2

Answer 2

隐藏选定值的另一种方法是在值标记为选定时使用下拉模板结果选项。return null

function hideSelected(value) {
  if (value && !value.selected) {
    return $('<span>' + value.text + '</span>');
  }
}

$(document).ready(function() {
  $('#dynamicAttributes').select2({
    allowClear: true,
    placeholder: {
      id: "",
      placeholder: "Leave blank to ..."
    },
    minimumResultsForSearch: -1,
    width: 600,
    templateResult: hideSelected,
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>

<select id="dynamicAttributes" multiple="true" data-tags="true">
  <option value="1">A</option>
  <option value="2">B</option>
  <option value="3">C</option>
</select>