jquery - 重置 select2 值并显示占位符

Question

如何在 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;
   }
});

score 253 · Accepted Answer

您必须将 select2 定义为

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

重置选择2

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

score 166 · Accepted Answer

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

定义选择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')

score 132 · Accepted Answer

Select2 改变了他们的 API：

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

现在最好的方法是：

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

编辑：2016 年 12 月评论建议以下是执行此操作的更新方法：

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

score 64 · Accepted Answer

唯一对我有用的是：

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

我正在使用版本 4.0.3

参考

根据 Select2 文档

score 43 · Accepted Answer

43

使用 Select2 4.0.9 版，这对我有用：

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

于 2019-08-27T01:54:11.510 回答

score 18 · Accepted Answer

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

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

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

score 16 · Accepted Answer

16

用这个：

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

于 2017-09-29T07:20:11.920 回答

score 14 · Accepted Answer

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

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

或者

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

如果您绑定了更改事件

score 13 · Accepted Answer

删除选定的值

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

清除期权价值

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

score 9 · Accepted Answer

这是正确的方法：

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

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

score 8 · Accepted Answer

使用以下配置 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");

score 7 · Accepted Answer

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

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

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

或者

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

score 6 · Accepted Answer

您可以通过以下方式清除选择

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

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

所以它是一个半解决方案

score 6 · Accepted Answer

首先，您必须像这样定义 select2：

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

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

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

score 5 · Accepted Answer

对于加载远程数据的用户，这会将 select2 重置为占位符，而不会触发 ajax。适用于 v4.0.3：

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

score 4 · Accepted Answer

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

$('.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([]);
 });

score 3 · Accepted Answer

对于占位符

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

重置选择 2

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

希望这可以帮助

score 2 · Accepted Answer

遵循推荐的方法。在文档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>

score 2 · Accepted Answer

我也遇到了这个问题，它源于在占位符重置之前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

score 2 · Accepted Answer

从 v.4.0.x 开始...

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

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

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

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

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

score 2 · Accepted Answer

在此处尝试了前 10 个解决方案并失败后，我发现此解决方案有效（请参阅页面下方的“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]);，我在上面展示了。）

score 2 · Accepted Answer

2

将此代码用于您的 js 文件

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

于 2018-09-10T06:01:32.003 回答

score 2 · Accepted Answer

2

从 select2 网站，

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

于 2020-05-13T23:48:36.323 回答

score 2 · Accepted Answer

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

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

score 1 · Accepted Answer

好吧，每当我这样做

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

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

由于我将 allowClear 选项设置为 true，因此我选择了

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

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

score 1 · Accepted Answer

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

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

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

score 1 · Accepted Answer

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

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

不需要实施initSelection

score 1 · Accepted Answer

1

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

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

于 2018-01-09T09:56:53.153 回答

score 1 · Accepted Answer

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

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

score 0 · Accepted Answer

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

这将再次显示占位符。

score 0 · Accepted Answer

DOM 接口，已经跟踪初始状态......

因此，执行以下操作就足够了：

$("#reset").on("click", function () {
    $('#my_select option').prop('selected', function() {
        return this.defaultSelected;
    });
});

score 0 · Accepted Answer

一种[非常] hacky 的方法（我看到它适用于版本 4.0.3）：

var selection = $("#DelegateId").data("select2").selection;
var evt = document.createEvent("UIEvents");
selection._handleClear(evt);
selection.trigger("toggle", {});

allowClear 必须设置为 true
选择元素中必须存在一个空选项

score 0 · Accepted Answer

为了重置值和占位符，我只需重新启动 select2 元素：

$( "#select2element" ).select2({
    placeholder: '---placeholder---',
    allowClear: true,
    minimumResultsForSearch: 5,
    width:'100%'
});

score 0 · Accepted Answer

我的解决方案是：

$el.off('select2:unselect')
$el.on('select2:unselect', function (event) {
    var $option = $('<option value="" selected></option>');
    var $selected = $(event.target);

    $selected.find('option:selected')
             .remove()
             .end()
             .append($option)
             .trigger('change');
    });

score 0 · Accepted Answer

我不知道是否有其他人经历过这种情况，但是一旦代码触发触发器（'change'），我的 javascript 就停止了，从未从触发器返回，并且函数的其余部分也从未执行。

我对 jquerys 触发器不够熟悉，不能说这是预期的。我通过将它包装在 setTimeout 中来解决它，虽然丑陋但有效。

score 0 · Accepted Answer

例如，如果您想在关闭模式时清除所有 select2 输入，那么您可以添加一个类“select2”并将它们全部设置回它们的占位符，就像这样。

$('#myModal').on('hidden.bs.modal', function (e) {
    $(this)
        .find(".select2").select2({placeholder: "Choose an option"})
        .val('').trigger('change.select2');
});

这种一次性重置的方法也可以用于表单。对我有用的版本是 4.0.10

score 0 · Accepted Answer

<label for="RECEIVED_BY" class="control-label"> Received into store By </label>
<label class="pull-right">
  <button
    type="button"
    title="Clear Received into store By"
    class="receive_clear clear-button"
    aria-label="Select2 options"
  >
    x
  </button></label
>
<select type="text" class="clear_receive_info_by">
  <option value="">--Select--</option>
  <option value="value1">value1</option>
  <option value="value2">value2</option>
  <option value="value3">value3</option>
</select>

jQuery：

var $clear_receive_info_by = $(".clear_receive_info_by").select2();
$(".receive_clear").on("click", function () {
    $clear_receive_info_by.val(null).trigger("change");
});

score 0 · Accepted Answer

我已经阅读了所有答案，其中许多已被弃用。

这是当前您可以清除和设置占位符值的方式：

// Clear and put a blank select placeholder
$("#MySelect").prop('disabled', false).find("option:gt(0)").remove();

score 0 · Accepted Answer

0

这对我使用 select2 版本 Select2 4.0.5 有效 $('.classToClear').select2().val('');

于 2021-11-13T11:12:28.733 回答

score 0 · Accepted Answer

这是最新选择 2 api 的工作片段。

重置或清除 select2 输入。

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

IE

$( ".reset" ).on('click',function(){
    $(".select2input").val([]).trigger('change');
});

score -2 · Accepted Answer

我为这种情况这样做：

  $('#select').val('');
  $('.select2.select2-container').remove();
  $('.select2').select2();

我将选择值更改为空
我删除了 select2 的容器
重新调用 select2

jquery - 重置 select2 值并显示占位符

41 回答 41

Related

Reference