Select2 多选重复值

Question

http://jsfiddle.net/tXFbk/2/

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

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

Answer 1

Select2 4.0.0 支持重复标签。

Jsfiddle 演示链接

$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

图片：

Answer 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;
                    }
                });
            }
        })

Answer 3

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

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

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

Answer 4

根据 NSDont 的上述回答，为了解决重新排序问题，我们可以在每次选择事件后重新排列选项，即：

$eventSelect.on("select2:select", function (e) { 
    log("select2:select", e);

    //rearrange options here:
    $eventSelect.find('option').each(function () {  
        if (!this.selected){
            $(this).appendTo($eventSelect);
        }
    });
    //end rearrange

    $eventSelect.append('<option value="'+e.params.data.text+'">' +e.params.data.text + '</option>');
});