Question

$('#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>

Answer 1

这并不能解决您的整个问题，因为专注的选择菜单仍然无法在点击时显示。但是你可以在blur()回调中拨打onItemAdd，让 - now - 模糊输入再次点击。

另外，你不需要调用this.close（），图书馆会为你做这件事。

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

Answer 2

我花了很长时间才弄清楚这一点，所以我将在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 个答案: