在 select2 中默认显示前 5 个选项

Question

我试图在呈现 select2 时将前 5 个选项显示为默认值。

Select countries
____________

America
Canada
England
France
Spain

我做了多个，用了selected，所以可以显示，但是没有上面那么直接。

如何设置成这样？

我用的是open选项，所以显示的跟上面一样。

$('#id').select2('open')

但是，当我点击屏幕上的任意位置时，它会关闭。我怎样才能让它一直开着？

Answer 1

假设您的下拉菜单 HTML 如下所示：

<select multiple="multiple" id="s1" style="width: 300px">
        <option value="1">America</option>
        <option value="2">Canada</option>
        <option value="3">England</option>
        <option value="4">France</option>
        <option value="5">Spain</option>
</select>

如果你想一直打开下拉菜单，可以使用下面的代码。这通过覆盖回调方法来防止关闭。

$(doucment).ready(function() {
var list = $('#s1').select2({
  closeOnSelect: false,
}).on("select2:closing", function(e) {
  e.preventDefault();
}).on("select2:closed", function(e) {
  list.select2("open");
});


list.select2("open");
});

请查看工作JSFiddle

在 select2 中默认显示前 5 个选项

Displaying first 5 options as default in select2

jquery-select2

dropdown