如何实现selectize.js下拉选择框默认处于打开展开状态？

可行实现方案 #

你之前的两种方案失效的原因如下：

• 直接给原生#select-state元素触发事件无效：selectize.js初始化后会隐藏原生的select元素，所有交互逻辑都绑定在它生成的自定义DOM结构上，给原生元素发事件不会被响应。
• 强制修改CSS显示下拉层会破坏组件原生交互逻辑，容易出现下拉定位偏移、无法正常收起、点击选项不生效等问题，不推荐使用。

你可以直接调用selectize实例自带的open()方法实现默认展开，有两种常用写法：

写法1：初始化时直接默认展开 #

直接在selectize的初始化回调中调用展开方法，最稳妥不会出现时序问题：

<select id="select-state" name="state[]" multiple class="demo-default" placeholder="Select Models">
 <option value="">Select Models</option>
 <option value="Tanzania">Tanzania</option>
 <option value="Kenya">Kenya</option>
 <option value="Uganda">Uganda</option>
 <option value="Asia">Asia</option>
 <option value="Malaysia">Malaysia</option>
 <option value="Japan">Japan</option>
</select>
<script>
$('#select-state').selectize({
    maxItems: 5,
    onInitialize: function() {
        // 此处this指向当前初始化的selectize实例
        this.open();
    }
});
</script>

写法2：动态控制展开 #

如果需要在页面加载完成后的其他时机触发展开，可以先保存selectize实例，需要时调用open()方法即可：

// 初始化时保存实例
const selectizeIns = $('#select-state')[0].selectize;

// 任意需要展开的时机调用
selectizeIns.open();

// 如果需要手动收起，调用close方法即可
// selectizeIns.close();

内容的提问来源于stack exchange，提问作者Nilesh