javascript - Select2multiselect重複値

Question

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

最初のロード時に値を複製し、値をクリアした後は入力からクリアしません。また、アイテム（「もう少しテキスト」など）を追加してから削除しても、入力値からはクリアされません。値の重複を停止させる方法はありますか？もう1つ-すでに追加されたアイテムの追加を無効にする方法は？

score 2 · Accepted Answer

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 の問題に基づく

写真:

score 1 · Accepted Answer

次の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;
                    }
                });
            }
        })

score 0 · Accepted Answer

変更を反映するには、select2 の変更イベントをトリガーする必要があります。

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

値を設定したら、トリガー値を手動で起動して、ドロップダウンリストで行われた最新の変更を反映する必要があります

javascript - Select2multiselect重複値

3 に答える 3

Related

Reference