2017-07-25 112 views
1

問題:選擇二多選沒有closeOnSelect重疊所選標籤的頂部結果

當我有一個select2()closeOnSelect =false,結果列表重疊選定的值時,沒有選擇的值的使所述值來包裝周圍。

HTML:

<select multiple id="e1" style="width:300px"> 
    <option value="AL">Alabama</option> 
    <option value="AK">Alaska</option> 
    <option value="AZ">Arizona</option> 
    <option value="AR">Arkansas</option>... 
</select> 

的Javascript:

$("#e1").select2({ 
    closeOnSelect: false 
}) 

截圖:

enter image description here

小提琴:

http://jsfiddle.net/sajjansarkar/dsg2t7y2/

回答

1

雖然比Sajjan的回答不乾淨多了。您可以在選擇的更改事件中調用close並打開。這會導致在每次選擇時重新繪製框,而不需要知道select2恰巧使用此版本的類名(以防它發生變化)。

var select = $("#e1").select2({ 
    closeOnSelect: false 
}).on("change", function(e){ 
    select.select2("close"); 
    select.select2("open"); 
}); 

http://jsfiddle.net/dsg2t7y2/1/

這具有使用相同的方法SELECT2通常會使用來定位在下拉的優點。因此,如果您在頁面上有任何關於select的內容,外觀將保持一致。

旁註:儘管它很煩人,但無論有沒有這個滾動器在每次選擇後都會返回頂部。 不寒而慄它有點殺我內

+0

查看後沒有出現select2有重繪的方法,沒有關閉和打開。可能是在他們的github上請求的東西:https:// github。com/select2/select2/ – Don

+0

不夠公平,你的代碼更乾淨,不像我的答案那樣依賴於CSS類的名字。我會接受它,我希望select2在他們身邊處理它,因爲這是一個錯誤。哦,也許在未來的版本中!謝謝你的時間! –

0

一個解決方案:

我找到解決它的方法之一,歡迎其他建議。

open添加了事件處理程序,並選擇每次重新定位結果範圍的事件。

$("#e1").select2({ 
    closeOnSelect: false 
}).on('select2:select select2:open', function(evt) { 
    var $container = $(this).data("select2").$container.find(".select2-selection__rendered"); 
    var $results = $(".select2-dropdown--below"); 
    $results.position({ 
    my: "top", 
    at: "bottom", 
    of: $container 
    }); 
});; 

工作小提琴:

http://jsfiddle.net/sajjansarkar/hvsvcc5r/

截圖:

enter image description here

+0

你的榜樣不包括取消選擇項目。儘管對事件處理程序的改變不大你可以使用'change' – Don