在jquery UI对话框上使用select2(v 4.0)时,如何在使用远程数据源时使allowClear选项工作？

Question

我正在使用select2下拉列表并且刚刚升级到版本4. 当你有一个远程数据源并且select2位于jquery UI对话框上时,一个看起来破坏的功能(或者我做错了)是allowClear选项

如果您的数据源是本地的(没有ajax)或者没有涉及jquery UI对话框,但是当我在jquery UI对话框上尝试使用远程数据源时,我会看到问题.

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

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

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

当我在远程数据源上调试相同的代码时,当该行代码触发时,似乎没有任何改变.

从谷歌搜索,我看到唯一相关的问题,如果你没有指定占位符文本(这里的示例问题),但在我的情况下,(如下所示)我指定这个

以下是一些截图:

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

asp.net-MVC查看:

 <% = 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>为其提供 an ，即使您使用的是远程数据源。这是因为 Select2 需要一个值来将选择设置为（通常是空白字符串），而它能做到这一点的唯一方法是使用占位符选项。

如果您有权访问 HTML，最简单的解决方案是<option>在<select>.

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

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

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

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

对于 ASP.NET MVC，您需要通过向 .NET 传递另一个参数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>

您可以使用以下代码初始化 Select2placeholder

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

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

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

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