选择二多选没有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 
})

截图：

小提琴：

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

来源

2017-07-25 Sajjan Sarkar

虽然比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的内容，外观将保持一致。

旁注：尽管它很烦人，但无论有没有这个滚动器在每次选择后都会返回顶部。 不寒而栗它有点杀我内

来源

2017-07-25 19:12:41 Don

查看后没有出现select2有重绘的方法，没有关闭和打开。可能是在他们的github上请求的东西：https：// github。com/select2/select2/ – Don

不够公平，你的代码更干净，不像我的答案那样依赖于CSS类的名字。我会接受它，我希望select2在他们身边处理它，因为这是一个错误。哦，也许在未来的版本中！谢谢你的时间！ –

一个解决方案：

我找到解决它的方法之一，欢迎其他建议。

为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/

截图：

来源

2017-07-25 18:39:30

你的榜样不包括取消选择项目。尽管对事件处理程序的改变不大你可以使用'change' – Don

选择二多选没有closeOnSelect重叠所选标签的顶部结果

回答

相关问题