Select2 多选重复值答案

【问题标题】：Select2 multiselect duplicates valuesSelect2 多选重复值
【发布时间】：2013-02-20 09:15:57
【问题描述】：

HTML：

<div class="control-group">
    <label for="some_id" class="control-label">Some ID</label>
    <div class="controls">
        <input type="text" id="some_id" name="some_id" class="span4"/>
    </div>
</div>

JS：

$(function() {
    $('#some_id').select2({
        allowClear: true,
        placeholder: 'Some ID',
        minimumInputLength: 2,
        multiple: true,
        data: [
            {id: 1, text: 'some text'},
            {id: 2, text: 'some other text'},
            {id: 3, text: 'some more text'}
        ]
    });
    $('#some_id').select2('data', [
        {'id':1,'text':'some text'}
    ]);

    console.log($('#some_id').select2('val'));
});

在第一次加载时它会重复值，在清除值后它不会从输入中清除它。此外，如果您添加一个项目（例如“更多文本”）然后将其删除，它不会从输入值中清除它。有没有办法让它停止重复值？还有一件事 - 如何禁用添加已添加的项目？

【问题讨论】：

你找到答案了吗？

标签： javascript duplicates jquery-select2

【解决方案1】：

Select2 4.0.0 支持重复标签。

Jsfiddle Demo link

$eventSelect.on("select2:select", function (e) { 
    log("select2:select", e);
  $eventSelect.append('<option value="'+e.params.data.text+'">' +e.params.data.text + '</option>');
});

$eventSelect.on("select2:unselect", function (e) { 
    log("select2:unselect", e); 
    e.params.data.element.remove();
});

function formatResultData (data) {
  if (!data.id) return data.text;
  if (data.element.selected) return
  return data.text;
};

基于 select2 事件和github issues

图片：

【讨论】：

您的示例出现重新排序问题。选择“红、红、绿”，得到“红、绿、红”

【解决方案2】：

检查以下 On Selecting 事件，并在 createSearchChoice

中设置 isNew 属性

如果它解决了您的问题，请告诉我

$('#some_id').select2({
            tags: true,
            tokenSeparators: [","],
            createSearchChoice: function (term, data) {
                if (term.trim().length > 0) {
                    if ($(data).filter(function () {
                      return this.text.toLowerCase().localeCompare(term.toLowerCase()) === 0;
                    }).length === 0) {
                        return {
                            id: term,
                            text: term,
                            isNew: true // this is necessary to check if the item is newly added or not
                        };
                    }
                }
            },
            multiple: true,
            minimumInputLength: 1,
            allowClear: true,
            data: [
        {id: 1, text: 'some text'},
        {id: 2, text: 'some other text'},
        {id: 3, text: 'some more text'}
    ],
        }).on("select2-selecting", function (e) {
            var tagId = '';
            if (e.choice.isNew) {
                self.AddTagToDatabase(e.choice.text);
            } else {
                var isValidTag = true;
                $(config.element[0] + ' ul li').find('div').each(function (index, item) {
                    if ($(item).html().toLowerCase().trim() == e.choice.text.toLowerCase().trim()) {
                        isValidTag = false;
                        e.choice.text = '';
                        return;
                    }
                });
            }
        })

【讨论】：

【解决方案3】：

你需要触发select2的change事件来反映变化。

$("#dropdownId").val("yourValues").trigger("change");

设置值后，您需要手动触发触发器值，以反映下拉列表中所做的最新更改

【讨论】：