为什么在焦点内单击时选择下拉菜单不打开答案

【问题标题】：Why Selectize Dropdown Not Opening When Clicked Inside the Focused为什么在焦点内单击时选择下拉菜单不打开
【发布时间】：2016-09-04 12:08:37
【问题描述】：

$('#select-state').selectize({
            closeAfterSelect: true,
            onItemAdd: function() {
            this.close();
 }
 });

这是多选下拉菜单，选择后，它会关闭下拉菜单，但之后如果我单击聚焦下拉菜单，下拉菜单不会打开。要工作，我必须通过单击外部来分散注意力，当我再次单击下拉菜单时，下拉菜单就会打开。当我们单击焦点下拉菜单时，我想要一个打开下拉菜单的提示。

<select id="select-state" name="state[]" multiple class="demo-default" style="width:50%" placeholder="Select a state...">
                    <option value="">Select a state...</option>
                    <option value="AL">Alabama</option>
                    <option value="AK">Alaska</option>
                    <option value="AZ">Arizona</option>
                    <option value="AR">Arkansas</option>
                    <option value="CA" selected>California</option>
                    <option value="CO">Colorado</option>
                    <option value="CT">Connecticut</option>
                    <option value="DE">Delaware</option>
                </select>

【问题讨论】：

标签： drop-down-menu selectize.js

【解决方案1】：

我花了很长时间才弄清楚这一点，所以我会在将近 2.5 年后在这里发布我的答案以供后代使用：)

$('#select-state').selectize({
  closeAfterSelect: true,
  openOnFocus: false,

  //Close dropdown on clicking on control in focus
  onInitialize: function () {
    var that = this;
    this.$control.on('mousedown', function () {
      if (that.isOpen)
        that.close();
      else
        that.open();
    });
  },
});

我没有使用closeAfterSelect: true 部分，因为这不是我的要求，因此在从列表中删除项目时，您必须考虑重新打开下拉菜单。

如果我找到了解决方法，那么我将对其进行编辑。我希望这对某人仍然有用！

【讨论】：

【解决方案2】：

这并不能解决您的全部问题，因为焦点选择的菜单仍然不会在点击时显示。但是您可以在 onItemAdd 回调中调用 blur()，使 - 现在 - 模糊的输入再次可点击。

另外，您不需要调用 this.close()，库会为您完成。

$('#select-state').selectize({
  closeAfterSelect: true,
  onItemAdd: function(){
    this.blur();
  }
});

【讨论】：