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

8gsdolmq  于 2023-01-30  发布在  jQuery
关注(0)|答案(9)|浏览(360)

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

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

JSF中间文件:https://jsfiddle.net/rd62bhbm/

gr8qqesn

gr8qqesn1#

问题的第1部分:

您可以使用 *CSS技巧 * 隐藏selected item,如下所示:

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

问题的第2部分:

您也可以使用 JQuery技巧 * 强制selected items到标签框的末尾,(通过在选择时获取选定项,分离它(删除它),然后将它重新附加到标签框,然后调用“change function”应用更改)*:

$("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(应用空值)

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

打开按钮:

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

Updated Fiddle #2

lawou6xi

lawou6xi2#

隐藏选定值的另一种方法是,当值标记为选定时,使用下拉模板结果选项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>
2guxujil

2guxujil3#

我找到了一种方法,使选定的值不再出现在选择弹出列表中
在文档中,您可以看到Select2事件的事件列表

开放

我利用这些select2事件来隐藏所选的值
下面是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
希望有帮助。

bmvo0sr5

bmvo0sr54#

我的解决方案在第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
    });
  };
tzdcorbm

tzdcorbm5#

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

这使一个错误当单击这删除签名按钮
TypeError:此.占位符未定义
使用

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

      });
});
0s7z1bwu

0s7z1bwu6#

从select2多个选定项目中删除(取消选择)项目
第一步:添加'multiple' css类到你的select2元素中以得到你想要的true元素

<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');
    });
cs7cruho

cs7cruho7#

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

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

否则

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

如果要完全清空列表,请使用

$("#dynamicAttributes").empty()

快乐编码

6yt4nkrj

6yt4nkrj8#

当我选择全部时,其他选择的值将被删除。当我选择全部时,其他选择的值将被删除。
问题图像


第二个问题图像

这就是如何解决问题并100%有效

$('.field-selectbox').on('select2:select', function (e) {

var data = e.params.data;
id = this.id;
vv  = $('#'+id).val();
selected_emp_id=data.id;
if(selected_emp_id == 'all'){
    $('#'+id).val(null).trigger('change');
    $('#'+id).val(selected_emp_id).trigger('change');
}
else{
    if(vv.includes('all'))
    {
        $("#"+id+" option[value='all']").prop("selected", false);
        $('#'+id).trigger('change');
    }
}

});

溶液附件

如果从列表中选择所有标记,则其他标记将被删除。

a11xaf1n

a11xaf1n9#

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

相关问题