select2動態搜尋問題解決

最近專案中頁面模板用到select2，需要動態搜尋資料，顯示下拉選，參考select2官網，大概寫出來，**如下

$("#select2-button-addons-single-input-group-sm").select2(,  
ajax: ;
},processresults: function(data) 這種形式的時候，可以使用類似此方法建立新的陣列物件
var arr = data
for(item in arr))
}return ;
},cache: false
},escapemarkup: function(markup) ,// let our custom formatter work
minimuminputlength: 1,
templateresult: formattask,
templateselection: formattaskselection
});

其中兩個引數：

templateresult: formattask,

templateselection: formattaskselection

對應的兩個方法要重寫

function formattask(username) 
function formattaskselection(username)

這樣寫遇到問題：

在選擇選項時總是選中乙個選項，但是顯示的是錯誤的選項，比如：我當前選中「北京」，下拉選第乙個是「上海」，我選擇上海，還是顯示「北京」，搞了兩天，最終找到問題所在，問題**是如下幾行：

var itemlist = ;//當資料物件不是這種形式的時候，可以使用類似此方法建立新的陣列物件
var arr = data
for(item in arr))
}

因為select2判斷選中必須要求資料格式為這樣，通過id來判斷選中項，如上面**，第一次搜尋，選中「北京」，遍歷建立新格式的時候，「北京」對應id為0，那麼id為0的選項為選中項，也就是「北京」。當我不重新整理頁面重新搜尋「上海」的時候，又進行遍歷建立新格式，這時候「上海」對應id也為0，這時候select2就認為id為0的選項是選中項，這時候雖然select顯示北京，但是實際選中項為上海。

解決：

設定全域性i，每次遍歷設定id為i，再進行i++操作，這樣id就不會重複，不會出現上面問題；

var i = 0;
$("#select2-button-addons-single-input-group-sm").select2(,  
ajax: ;
},processresults: function(data) 這種形式的時候，可以使用類似此方法建立新的陣列物件
var arr = data
for(item in arr))
i++;
}return ;
},cache: false
},escapemarkup: function(markup) ,// let our custom formatter work
minimuminputlength: 1,
templateresult: formattask,
templateselection: formattaskselection
});

補充：

經測試，上面建立新格式，其中的id可以隨意，不一定為數字，只要不是重複的就好，而且id是有其他用處的，如果提交表單，id值就是提交的select中option的value值，大家視自己情況修改id。

select2動態搜尋問題解決

Select2衝突問題

select2的相關問題

解決select2下拉欄錯位問題

select2動態搜尋 問題解決

Select2衝突問題

select2的相關問題

解決select2下拉欄錯位問題

相關推薦

select2動態搜尋問題解決