在select2 3.5.2中使用initSelection進行自定義篩選

Question

我有一個使用select2的文本字段。 這是初始化：

        $("#foo").select2({
            createSearchChoice:function(term, data) { 
                if ($(data).filter(function() { 
                    return this.text.localeCompare(term)===0; 
                }).length===0) 
                {return {id:term, text:term};} 
            },
            initSelection : function (element, callback) {
                var data = {id: element.val(), text: element.val()};
                callback(data);
            },
            tags:[],
            tokenSeparators: [","], 
            data: [...data goes here...]
        }); 

在此字段中，用戶應該輸入一個數字，或從列表中選擇項目。 如果用戶放入的項目未顯示在列表中，則應將其創建為簡單標記（id和文本相同）。 這有效。

什么不起作用是我以編程方式設置值：

myvar.find('.placeholder lorem-ipsum').val(number).trigger("change");

它現在的工作方式是，當我將它設置為任何值時，它會毫無怨言地采用它，制作一個新的簡單標記。 但是，如果我要完全刪除initSelection參數，它將忽略未知值，並使用從列表中獲取的已知值（其中標記是復雜的 - id和文本不同）。

如何使它如果在列表中找到我設置的字段的值，它將使用該項，否則制作一個簡單的標記？ 它現在的工作方式（僅限簡單的標簽）是可以接受的，但我更喜歡它理想的工作。

編輯：我已經舉例說明了如何使用和不使用initSelection參數。

http://jppk.byethost12.com/with.html

http://jppk.byethost12.com/without.html

簡而言之，當我按“添加新項目”時，我希望它像with.html一樣工作，當我按“添加現有項目”時，我希望它像without.html一樣工作。

Answer 1

這是我對你想要的最好的解釋。

的jsfiddle

訣竅是將元素附加到選擇字段。

 var array = ['foo', 'bar', 'baz'] $.each(array, function(key, value) { appendSelect(value); }); $("#foo").select2(); $('#submit').click(function() { var val = $('#name').val(); $('#name').val(''); array.push(val); appendSelect(val); }); function appendSelect(value) { $('#foo').append($("<option></option>").text(value)); } 

 <link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.1/css/select2.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.1/js/select2.min.js"></script> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <div class='container'> <select id='foo' multiple="multiple" class='form-control'></select> <label>Input</label> <input id='name' /> <button id='submit'>submit</button> </div> 

Answer 2

很久以后，我找到了一個正常的解決方案：

    initSelection : function (element, callback) {
        var eArr = element.val().split(",");
        var data = [];
        for (var i=0;i<eArr.length;i++) {
            for (var j=0;j<preExistingData.length;j++) {
                if (preExistingData[j]["id"] === eArr[i]) {
                    data.push(preExistingData[j]);
                    continue;
                }
            }
            data.push({id: eArr[i], text: eArr[i]});
        }
        callback(data);
    },

這不僅檢查該值是否在預先存在的值之間（在這種情況下它使用該項），而且還檢查該值是否為逗號分隔的值列表（在這種情況下，它將它們正確地封裝為JS對象）。