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

Posted 2023-05-07

【中文标题】在 jquery UI 对话框上使用 select2 (v 4.0) 时，如何在使用远程数据源时让 allowClear 选项起作用？

【英文标题】：When using select2 (v 4.0) on a jquery UI dialog, how can I get allowClear option to work when using a remote datasource?

【发布时间】：2015-11-19 13:25:44

【问题描述】：

我使用select2 dropdown和刚刚升级到版本4的一个功能，它似乎打破（或我做错了什么）是allowClear选项当你有一个远程数据源和选择2坐拥一个jquery UI对话框强>

它工作正常，如果你的数据源是本地的（没有AJAX），或者如果没有jQuery用户界面对话框参与，但是当我尝试在一个jQuery远程数据源用户界面对话框我看到的问题。

有趣的是，当seetting allowClear = TRUE，则“X” DOES ：显示了在下拉框的右侧后，我搜索和选择项目，但是当我点击它，所有选择2码奔跑，但先前选定的值不移除。我已经调试的select2.js代码和所有喜欢它似乎应该被解雇（handleClear等）的代码似乎被正确射击。 P>

当上的本地实例测试，我看到这行代码是实际删除值：

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

错误时我调试远程数据源上的相同的代码，似乎没有任何变化都当该行代码火灾。 P>

从谷歌上搜索，唯一相关的问题我看看，如果你不指定一个占位符文本（example question here），但对我来说，（按照下文）我做指定此 P>

下面是一些截图：

和这里是我低于代码设置此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
);

有没有其他人遇到这个问题，或者可以看到为什么在与远程数据源的选择2下拉菜单中的“X”点击不会清除先前选择的选择吗？ P>

更新

下面给出凯文的回答，这个问题似乎是孤立的事实证明我的选择2下拉是一个jQuery UI的对话框（如如果我尝试它正常的网页确实如预期工作的） P>

唯一的其他代码，我不得不添加（以获得选择2在jQuery UI的对话框工作）是这样的代码： P>

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”以前选择的值。 P>

【问题讨论】：

什么是对#MyDropdown？ SPAN>的HTML 你说得对，我抓住了一个错误的问题。尽管如此，HTML，你正在使用的这个问题很重要，因为这将影响占位符的作品。 SPAN> 我补充说我使用在我的视图中的HTML（井的HtmlHelper）跨度> 你有没有尝试初始化选择二后 i>的打开对话框？它将帮助，如果你提供的jQuery UI代码和HTML SPAN>

【参考方案1】：

使用单选占位符时，您必须始终为其提供<option></option>，即使您使用的是远程数据源。这是因为 Select2 需要一个值来将选择设置为（通常是一个空白字符串），并且它可以做到这一点的唯一方法是使用占位符选项。

如果您可以访问 HTML，简单的解决方案是在 <select> 内添加一个空白 <option>。

<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 支持通过传入数据对象而不是 placeholder 的字符串来设置自定义占位符 value。

所以对于看起来像这样的 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>

【讨论】：

你有这个工作的例子吗，因为我已经做了一个改变，得到你所拥有的，我仍然没有看到任何不同（点击 X 仍然没有清除值）。一个有趣的注意事项是，即使您添加 Select an option，它也会在您初始化后被 select2 删除

当值设置为-1 并触发change 事件时，您是否仍然没有看到任何变化？ $('select').val() 显示了什么？

是的。 Select.val 显示我要删除的值

您提到该选项正在被删除。你的意思是从标记还是从结果？ Select2 不应该自行删除任何内容，所以我不确定它为什么会从标记中消失。

是的，当我在 select2 初始化后查看源代码时，它会从原始 select 中删除该项目。 .你有没有看过我要求的工作或有任何示例代码，因为这会很有帮助？