javascript - 在 jquery UI 对话框上使用 select2 (v 4.0) 时，如何让 allowClear 选项在使用远程数据源时起作用？

Question

我正在使用 select2 dropdown并且刚刚升级到版本 4。似乎损坏的一个功能(或者我做错了什么)是 allowClear 选项当您有远程数据源并且 select2 位于 jquery UI 对话框上时

如果您的数据源是本地的(没有 ajax)或者没有涉及 jquery UI 对话框，它工作正常，但是当我尝试在 jquery UI 对话框上使用远程数据源时，我看到了问题。

有趣的是，当设置 allowClear = true 时，“X”DOES 会在我搜索并选择一个项目后显示在下拉框的右侧，但是当我单击它时，所有 select2 代码都会运行，但不会删除先前选择的值。我已经调试了 select2.js 代码，所有看起来应该被触发的代码(handleClear 等)似乎都在正确触发。

在本地示例上进行测试时，我发现这行代码实际上是删除值的内容:

 this.$element.val(this.placeholder.id).trigger('change');

当我在远程数据源上调试相同的代码时出现错误，当该行代码触发时似乎没有任何改变。

通过谷歌搜索，如果您不指定占位符文本 (example question here)，我会看到唯一相关的问题，但就我而言，(如下所示)我确实指定了这个

下面是一些截图:

下面是我设置此 select2 下拉列表的代码:

asp.net-MVC View :

 <% = Html.DropDownList("MyDropdownId", Model.DropdownItems, new {@id = "MyDropdown"}) %><br/><br/>

这是我的 javascript:

$("#MyDropdown").select2({
    theme: "classic",
    width: "280px",
    allowClear: true,
    ajax: {
        url: "/MyController/Search",
        dataType: 'json',
        delay: 300,
        data: function (params) {
            return { q: params.term };
        },
        processResults: function (data, params) {
            return { results: data };
        },
        cache: false
    },
    escapeMarkup: function (markup) { return markup; },
    minimumInputLength: 3,
    placeholder: "Search",
    templateResult: streamFormatResult,
    templateSelection: streamSelectionResult
});

有没有其他人遇到过这个问题或者能明白为什么在带有远程数据源的 select2 下拉列表中单击“X”不会清除之前选择的选项？

更新

鉴于凯文在下面的回答，问题似乎与我的 select2 下拉菜单位于 jquery UI 对话框上这一事实无关(就好像我在常规页面上尝试它确实按预期工作一样)

我必须添加的唯一其他代码(让 select2 在 jquery UI 对话框上工作)是这段代码:

if ($.ui && $.ui.dialog && $.ui.dialog.prototype._allowInteraction) {
    var ui_dialog_interaction = $.ui.dialog.prototype._allowInteraction;
    $.ui.dialog.prototype._allowInteraction = function (e) {
        if ($(e.target).closest('.select2-dropdown').length) return true;
        return ui_dialog_interaction.apply(this, arguments);
    };
}

如果没有上面的代码，select2 输入是不可编辑的。我不确定这是否会导致在我单击“X”时无法清除之前选择的值的问题。

Answer 1

在单选中使用占位符时，您必须始终提供 <option></option>对于它，即使您使用的是远程数据源。这是因为 Select2 需要一个值来将选择设置为(通常是一个空字符串)，而它能做到这一点的唯一方法是使用占位符选项。

如果您有权访问 HTML，最简单的解决方案是添加一个空白 <option>在<select>里面.

<select>
  <option></option>
</option>

您甚至可以向其中添加一些将显示给用户的有用文本，value必须是一个空字符串

<select>
  <option value="">Select an option</option>
</select>

现在，一些框架会自动生成<select>为你。幸运的是，其中大多数都提供了一种为您定义“空白”或“占位符”选项的方法。如果由于某种原因框架没有这样做，您通常可以将一个新选项添加​​到您告诉​​框架要呈现的选项列表中。

对于 ASP.NET MVC，您需要通过传入 another argument to Html.DropDownList 来控制占位符选项。 .

<% = Html.DropDownList("MyDropdownId", Model.DropdownItems, "Select an option", new {@id = "MyDropdown"}) %>

这应该会在选项列表的顶部生成一个空白占位符。

现在，一些框架将要求占位符选项具有 value除了空白字符串。 Select2 支持设置自定义占位符 value通过为 placeholder 传入数据对象而不是字符串.

所以对于看起来像的 HTML

<select>
  <option value="-1">Select an option</option>
</select>

您可以使用以下代码为 placeholder 初始化 Select2

$('select').select2({
  placeholder: {
    id: '-1',
    text: 'Custom placeholder text'
  }
});

这是使用 placeholder 的远程数据源示例(在本例中为模拟)和 allowClear .请记住，您不需要设置 ajax.transport ，这只是因为我们实际上并没有发出远程请求。

$('.js-states').select2({
  placeholder: {
    id: "-1",
    text: "Select a state..."
  },
  allowClear: true,
  ajax: {
    url: "/MyController/Search",
    dataType: 'json',
    delay: 300,
    data: function (params) {
      return { q: params.term };
    },
    processResults: function (data, params) {
      return { results: data };
    },
    cache: false,
    transport: function (params, success, failure) {
      var term = params.data.q || "";
      
      // mock response
      var response = [
        {
          id: "AK",
          text: "Alaska"
        },
        {
          id: "AL",
          text: "Alabama"
        },
        {
          id: "AZ",
          text: "Arizona"
        },
        {
          id: term || "nothing",
          text: term || ""
        }
      ];
      
      success(response);
    }
  }
});

<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"></script>

<select class="js-states" style="width: 50%">
  <option value="-1">Select a state</option>
</select>