重置 select2 值并显示占位符

Posted 2023-05-07

【中文标题】重置 select2 值并显示占位符

【英文标题】：Reset select2 value and show placeholder

【发布时间】：2013-07-31 04:35:12

【问题描述】：

如何在 select2 重置的值上设置占位符。在我的示例中，如果单击位置或等级选择框并且我的 select2 的值比 select2 的值应重置并显示默认占位符。此脚本正在重置值，但不会显示占位符

$("#locations, #grade ").change(function() 
   $('#e6').select2('data', 
     placeholder: "Studiengang wählen",
     id: null,
     text: ''
   );
);

$("#e6").select2(
   placeholder: "Studiengang wählen",
   width: 'resolve',
   id: function(e) 
     return e.subject;
   ,
   minimumInputLength: 2,
   ajax: 
     url: "index.php?option=com_unis&task=search.locator&tmpl=component&<?php echo JSession::getFormToken() ?>=1",
     dataType: 'json',
     data: function(term, page) 
       return 
         q: term, // search term
         g: $('#grade option:selected').val(),
         o: $('#locations option:selected').val()
       ;
     ,
     results: function(data, page) 
       return 
         results: data
       ;
     
   ,
   formatResult: subjectFormatResult,
   formatSelection: subjectFormatSelection,
   dropdownCssClass: "bigdrop",
   escapeMarkup: function(m) 
     return m;
   
);

【问题讨论】：

只是参考文档而不是使用在这个或其他 SO 线程中不起作用的奇怪建议。 Select2 建议的方法是：$('#mySelect2').val(null).trigger('change');。参考：select2.org/programmatic-control/add-select-clear-items。这就像一个魅力。

【参考方案1】：

您必须将 select2 定义为

$("#customers_select").select2(
    placeholder: "Select a customer",
    initSelection: function(element, callback)                    
    
);

重置选择2

$("#customers_select").select2("val", "");

【讨论】：

我用 进行了尝试，但出现错误：当附加到 元素时，Select2 不允许使用 Option 'initSelection'。

这对我不起作用。占位符仍然没有出现。

请参阅下面的@Lego Stormtroopr 的答案，它反映了根据 Select2 的 API 的新方法。不推荐使用上述方法。

从 v4.0.3 开始，.select2("val", "") 似乎不再起作用了。

$("#customers_select").val('').trigger('change') ; 我用过这个，它成功了。

【参考方案2】：

接受的答案在我的情况下不起作用。我正在尝试这个，它正在工作：

定义选择2：

$("#customers_select").select2(
    placeholder: "Select a State",
    allowClear: true
);

或

$("#customers_select").select2(
    placeholder: "Select a State"
);

重置：

$("#customers_select").val('').trigger('change')

或

$("#customers_select").empty().trigger('change')

【讨论】：

我发现除非你定义了占位符，否则 allowClear 不起作用

$('#your_select_input').val('').trigger('change') 和 $('#your_select_input').val(''); 在 Firefox 中都不起作用

这对我有用，它会从我正在使用 v4.0.3 的 select2 中删除所有数据

$("#customers_select").empty().trigger('change') 对我有用。 :)

'$("#customers_select").empty().trigger('change')' 为我工作，谢谢！

【参考方案3】：

Select2 更改了他们的 API：

Select2：select2("val") 方法已被弃用 并将在以后的 Select2 版本中删除。请改用 $element.val()。

现在最好的方法是：

$('#your_select_input').val('');

编辑：2016 年 12 月 评论表明以下是更新的方法：

$('#your_select_input').val([]);

【讨论】：

这会更新值，但要使其正确显示，您必须触发更改事件。 $('#your_select_input').val('').trigger('change')

这对我不起作用。占位符仍然没有出现。

这适用于我添加change 触发器，但也会触发我们正在使用的验证库——现在我将不得不使用已弃用的版本。

这不能正常工作，使用 select2 4.0.2。它将重置选择并恢复占位符，但是当我选择一个新值（重置后）时，我还看到选择了一个“空字符串”选项（即，一个只有“x”的框）。

$('#your_select_input').val('').trigger('change') 仅在提供占位符时有效。否则空字符串选项将显示为选定选项。

【参考方案4】：

唯一对我有用的是：

$('select2element').val(null).trigger("change")

我使用的是 4.0.3 版

参考

According to Select2 Documentation

【讨论】：

我也在使用 v4.0.3，$('select2element').val("").trigger("change") 也可以正常工作。

请注意，您的 中还必须有一个空的 。如果您在 select2 中使用 ajax，这将有所帮助 - $('#selectFieldId').prepend(' ')

【参考方案5】：

Select2 版本 4.0.9 这对我有用：

$( "#myselect2" ).val('').trigger('change');

【讨论】：

这使我的 select2 下拉列表空白。为我工作。谢谢。

【参考方案6】：

Select2 使用特定的 CSS 类，因此重置它的简单方法是：

$('.select2-container').select2('val', '');

如果您在同一个表单中有多个 Select2，则您的优势在于，所有这些都将使用这个单个命令重置。

【参考方案7】：

使用这个：

$('.select').val([]).trigger('change');

【讨论】：

对我来说，使用 $('.select2').val([]).trigger('change');

【参考方案8】：

删除选定的值

$('#employee_id').select2('val','');

---

清除选项值

$('#employee_id').html('');

【讨论】：

fefe 要求重新设置占位符文本。所以只有这个答案的第一部分是有效的。

是的，这就是我突出显示答案标题的原因。

第一个答案确实不再适用于 >4.0。但是第二个选项救了我！这是您想要真正清除 select2 时的解决方案。仅将 .val('') 设置为选择 2 是不够的。您还需要清除 html。非常感谢！！！

无论如何感谢@ShankaSMS 我正在寻找解决方案来重置和重新绑定数据到 select2

【参考方案9】：

我知道这是一个老问题，但这适用于 select2 4.0 版

 $('#select2-element').val('').trigger('change');

或

$('#select2-element').val('').trigger('change.select2'); 

如果您绑定了更改事件

【讨论】：

优秀的解决方案。我必须添加 .last() 函数来定位新添加的 select2 框。 $('#select2-element').last().val('').trigger('change.select2');

【参考方案10】：

这是正确的方法：

 $("#customers_select").val('').trigger('change');

我正在使用最新版本的 Select2。

【参考方案11】：

使用以下配置select2

    $('#selectelementid').select2(
        placeholder: "Please select an agent",
        allowClear: true // This is for clear get the clear button if wanted 
    );

并以编程方式清除选择输入

    $("#selectelementid").val("").trigger("change");
    $("#selectelementid").trigger("change");

【参考方案12】：

我尝试了上述解决方案，但对我不起作用。

这是一种 hack，您不必触发更改。

$("select").select2('destroy').val("").select2();

或

$("select").each(function ()  //added a each loop here
        $(this).select2('destroy').val("").select2();
);

【讨论】：

我在我的实现中修改为： $("#select").on('change', function () $(this).val("").select2(); );

【参考方案13】：

首先你必须像这样定义 select2：

$('#id').select2(
    placeholder: "Select groups...",
    allowClear: true,
    width: '100%',
)

要重置 select2，只需使用以下代码块：

$("#id > option").removeAttr("selected");
$("#id").trigger("change");

【参考方案14】：

您可以通过

清除选择

$('#object').empty();

但它不会让你回到你的占位符。

所以它是一个一半的解决方案

【参考方案15】：

对于加载远程数据的用户，this 将在不触发 ajax 的情况下将 select2 重置为占位符。适用于 v4.0.3：

$("#lstProducts").val("").trigger("change.select2");

【讨论】：

为我工作，但我的触发器只是“改变”

这是唯一对我有用的解决方案，可以使用 Ajax 数据从另一个 Select2 重置 Select2。

【参考方案16】：

所以，要重置表单，你们中的一些人将有一个重置按钮。 在脚本标签内添加以下代码

$('.your_btn_class').click(function()
    $('#select_field_id').val([]);
    $("#select_field_id").select2(
    placeholder: "this is a placeholder",
    );
);

或者只是清空选择字段而不保留占位符：

$('.your_btn_class').click(function()
    $('#select_field_id').val([]);
 );

【参考方案17】：

占位符

$("#stateID").select2(
    placeholder: "Select a State"
);

重置选择 2

$('#stateID').val('');
$('#stateID').trigger('change');

希望对你有帮助

【参考方案18】：

按照推荐的方式进行操作。在文档https://select2.github.io/options.html#my-first-option-is-being-displayed-instead-of-my-placeholder 中找到（这似乎是一个相当普遍的问题）：

发生这种情况时，通常意味着您的<option></option> 中没有空白<select> 作为第一个选项。

如：

<select>
   <option></option>
   <option value="foo">your option 1</option>
   <option value="bar">your option 2</option>
   <option value="etc">...</option>
</select>

【参考方案19】：

我也遇到了这个问题，它源于val(null).trigger("change"); 在占位符重置之前抛出了No select2/compat/inputData 错误。我通过捕获错误并直接设置占位符（连同宽度）来解决它。 注意：如果你有不止一个，你需要抓住每一个。

try
    $("#sel_item_ID").select2().val(null).trigger("change");
catch(err)
    console.debug(err)

try
    $("#sel_location_ID").select2().val(null).trigger("change");
catch(err)
    console.debug(err)

$('.select2-search__field')[0].placeholder='All Items';
$('.select2-search__field')[1].placeholder='All Locations';
$('.select2-search__field').width(173);

我正在运行 Select2 4.0.3

【讨论】：

听起来您有一个绑定到change 事件的侦听器。尝试触发change.select2 - 这不会触发绑定的侦听器（请参阅github.com/select2/select2/issues/3620）。

【参考方案20】：

从 v.4.0.x...

清除值，但也恢复占位符的使用...

.html('<option></option>');  // defaults to placeholder

如果它是空的，它将选择第一个选项而不是你想要的选项

.html(''); // defaults to whatever item is first

坦率地说...Select2 实在是太让人头疼了，让我吃惊的是它还没有被替换。

【参考方案21】：

在这里尝试了前 10 个解决方案并失败后，我发现 this 解决方案可以工作（请参阅页面下方的“nilov 于 4 月 7 日发表评论•已编辑”评论）：

(function ($) 
   $.fn.refreshDataSelect2 = function (data) 
       this.select2('data', data);

       // Update options
       var $select = $(this[0]);
       var options = data.map(function(item) 
           return '<option value="' + item.id + '">' + item.text + '</option>';
       );
       $select.html(options.join('')).change();
   ;
)(jQuery);

然后进行更改：

var data = [ id: 1, text: 'some value' ];
$('.js-some-field').refreshDataSelect2(data);

（作者最初显示var $select = $(this[1]);，评论者更正为var $select = $(this[0]);，我在上面显示。）

【讨论】：

这是唯一一个对我有用的……多年后

【参考方案22】：

在你的 js 文件中使用这段代码

$('#id').val('1');
$('#id').trigger('change');

【参考方案23】：

来自 select2 网站，

$("#mySelect2ControlId").val(null).trigger("change");

【参考方案24】：

$("#customers_select").val([]).trigger('change')

这将删除值，对我来说最重要的是 - 它还会删除 空 x 按钮

【参考方案25】：

好吧，每当我这样做时

$('myselectdropdown').select2('val', '').trigger('change');

在大约三到四次触发后，我开始出现某种滞后。我想有一个内存泄漏。它不在我的代码中，因为如果我删除了这一行，我的应用程序就没有延迟。

因为我将 allowClear 选项设置为 true，所以我选择了

$('.select2-selection__clear').trigger('mousedown');

这可以跟一个 $('myselectdropdown').select2('close');如果您想关闭打开的建议下拉菜单，请在 select2 dom 元素上触发事件。

【参考方案26】：

我已经尝试了上述解决方案，但没有一个适用于版本 4x。

我想要实现的是：清除所有选项但不要触摸占位符。这段代码对我有用。

selector.find('option:not(:first)').remove().trigger('change');

【讨论】：

如果你使用 selector.find('option:not(:first)').html('');它应该可以工作。

【参考方案27】：

使用 select2 3.2 版，这对我有用：

$('#select2').select2("data", "");

不需要实现initSelection

【讨论】：

这是迄今为止我最简单的方法。其他方法对我不起作用。

【参考方案28】：

$('myselectdropdown').select2('val', '0')

其中 0 是下拉列表的第一个值

【参考方案29】：

这个解决方案对我有用（Select2 4.0.13）

$('#select').on("select2:unselecting", function (e) 
   $(this).val('').trigger('change');
   e.preventDefault();
);

【参考方案30】：

在使用此$("#customers_select").select2("val", ""); 清除值之前 尝试在重置点击时将焦点设置到任何其他控件。

这将再次显示占位符。