如何从select2多选中的选项列表中删除选定的选项并按选择的顺序显示选定的选项

Posted 2023-05-07

【中文标题】如何从select2多选中的选项列表中删除选定的选项并按选择的顺序显示选定的选项

【英文标题】：How to remove selected option from the option list in select2 multiselect and show selected options in the order they are selected

【发布时间】：2016-08-09 12:53:23

【问题描述】：

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

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

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

【参考方案1】：

Q 的第 1 部分：

您可以使用 CSS 技巧 来隐藏 selected item，如下所示：

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

Q 的第 2 部分：

你也可以做一个 JQuery 技巧来强制 selected items 到标签框的末尾，( 通过在选择上获取选定的项目，分离它（删除它），然后将它重新附加到标签框，然后调用“更改函数”来应用更改）：

$("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"); 
);

Updated Fiddle #2

【讨论】：

它只是从输入框中清除所有选定的值，但不会触发取消选择事件“.on('select2:unselect', function(e) ”。它发生在我实际点击“ x" 按钮。当我单击表单的重置按钮时，我想要类似的行为。因为我有一些代码要在每个选定值的取消选择回调函数上执行。

@user1614862 是的，此方法不会触发取消选择事件。这种触发方法在插件文档中正式使用 > Programmatic access.. 但我会在找到另一种方法后立即通知您。谢谢

不幸的是，第 1 部分 CSS 解决方案在使用键盘浏览选项时效果不佳，因为它仍然遍历 display: none 选项。

第 1 部分 对我来说已经足够了 :) 谢谢

取消鼠标悬停问题：.select2-results__option--selected display: none;

【参考方案2】：

我找到了一种方法使所选值不再出现在选择弹出列表中

在文档中，您可以看到他们的事件列表Select2 events

打开

我利用这些 select2 事件 open 来隐藏选定的值

这里是javascript ::

$(document).ready(function() 

  $('#dynamicAttributes').select2(
      allowClear: true,
      minimumResultsForSearch: -1,
      width: 600
  );

  // override the select2 open event
  $('#dynamicAttributes').on('select2:open', function () 
    // get values of selected option
    var values = $(this).val();
    // get the pop up selection
    var pop_up_selection = $('.select2-results__options');

    if (values != null ) 
      // hide the selected values
       pop_up_selection.find("li[aria-selected=true]").hide();

     else 
      // show all the selection values
      pop_up_selection.find("li[aria-selected=true]").show();
    

  );

);

这是DEMO

希望对你有帮助。

【参考方案3】：

另一种隐藏选定值的方法是在值被标记为选定时使用dropdown templateResult 选项到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>

【参考方案4】：

我的解决方案在 #3158 行中修改了 select2.js（核心，版本 4.0.3）。添加以下验证：

if ($option[0].selected == true) 
      return;

通过此验证，我们可以从下拉列表中排除所选内容。如果你写了一个选定选项的名称，就会出现选项“noResult”的文本。

完整代码如下：

SelectAdapter.prototype.query = function (params, callback) 
    var data = [];
    var self = this;

    var $options = this.$element.children();

    $options.each(function () 
      var $option = $(this);    
      if (!$option.is('option') && !$option.is('optgroup') ) 
        return;
      

      if ($option[0].selected == true) 
           return;
      

      var option = self.item($option);    
      var matches = self.matches(params, option);    
      if (matches !== null) 
        data.push(matches);
      
    );

    callback(
      results: data
    );
  ;

【参考方案5】：

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

点击删除标志按钮时会出错

TypeError: this.placeholder 未定义

使用

 $(document).ready(function()
      $('#dynamicAttributes').select2(
            allowClear: true,
            minimumResultsForSearch: -1,
            width: 600,
            placeholder: 'past your placeholder'

      );
);

【参考方案6】：

从 select2 多个选定项目中删除（取消选择）项目

第一步：将“多个”css 类添加到您的 select2 元素中，以获得您想要的真实元素

<select class="multiple">
....
</select>

    $('select.multiple').on('select2:selecting', function (e) 
        var select = this;
        var idToRemove = '0';
        var selections = $(select).select2('data');

        var Values = new Array();

        for (var i = 0; i < selections.length; i++) 
            if (idToRemove !== selections[i].id) 
                Values.push(selections[i].id);
            
        
        $(select).val(Values).trigger('change');
    );

【参考方案7】：

如果您有更改触发器或取消选择点击 使用这个：

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

其他

$("#dynamicAttributes").val('')

如果你想完全清空列表 使用

$("#dynamicAttributes").empty()

愉快的编码

【参考方案8】：

$("#cqte").select2("val", "");
//cqte is id of dropdown