重置select2值并显示占位符

我如何设置占位符的值重置由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;
}
});
468357 次浏览
小开
最佳答案

必须将select2定义为

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

重置select2

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

Select2使用了一个特定的CSS类，所以重置它的简单方法是:

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

这样做的好处是，如果在同一个表单中有多个Select2，它们都会被这个命令重置。

小开

Select2改变了API:

Select2: select2("val")方法已弃用 并将在以后的Select2版本中删除。

.val(

现在最好的方法是:

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

编辑:2016年12月注释建议下面是更新的方法:

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

删除所选值

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

清除选项值

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

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

这将再次显示占位符。

小开

公认的答案不适用于我的情况。我正在尝试，而且很有效:

定义select2:

$("#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')
小开

按照推荐的方式来做。在文档https://select2.github.io/options.html#my-first-option-is-being-displayed-instead-of-my-placeholder中找到(这似乎是一个相当常见的问题):

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

如:

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

DOM接口已经跟踪了初始状态…

所以做到以下几点就足够了:

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

不管什么时候

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

在三到四次触发后，我开始有一些延迟。我想是内存泄漏了。它不在我的代码中，因为如果我删除这行，我的应用程序是无延迟的。

因为我有allowClear选项设置为true，我去

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

后面可以跟着$('myselectdropdown').select2('close');事件触发器在select2 dom元素上如果你想关闭打开建议下拉列表。

小开

一个[非常]俗气的方法(我看到它适用于4.0.3版本):

var selection = $("#DelegateId").data("select2").selection;
var evt = document.createEvent("UIEvents");
selection._handleClear(evt);
selection.trigger("toggle", {});
  • allowClear必须设置为true
  • select元素中必须存在空选项
小开

我也有这个问题，它源于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

小开

您可以通过

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

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

所以这是半解

小开

为了重置值和占位符，我只需要重新初始化select2元素:

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

唯一对我有用的是:

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

我使用的是4.0.3版本

参考

根据Select2文档 .

小开

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

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

或

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

如果你有变化事件绑定到它

小开

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

我想要实现的是:清除所有选项，但不要触摸占位符。这个代码适用于我。

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

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

这是一种hack，你不需要触发更改。

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

或

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

使用select2 3.2版本，这为我工作:

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

不需要实现initSelection

小开

从v.4.0.x开始…

，但也恢复占位符使用…

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

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

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

坦率地说……Select2是如此令人讨厌，它竟然没有被替换，这让我感到惊讶。

小开

首先，你必须像这样定义select2:

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

要重置select2，你可以简单地使用以下代码块:

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

在尝试了这里的前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]);，我在上面显示。)

小开

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

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

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

我的解决方案是:

$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');
});
小开

用这个:

$('.select').val([]).trigger('change');
小开 
$('myselectdropdown').select2('val', '0')

0是下拉列表的第一个值

小开

这是正确的方法:

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

我使用的是Select2的最新版本。

小开

对于占位者

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

重置一个选择2

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

希望这能有所帮助

小开

在js文件中使用这段代码

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

我不知道是否有人经历过这种情况，但一旦代码命中触发器('change')，我的javascript就停止了，从未从触发器返回，其余的函数从未执行。

我对jquery触发器不够熟悉，不能说这是预期的。我通过将它包装在setTimeout中来解决它，这很难看，但很有效。

小开

我在这个案例中是这样做的:

  $('#select').val('');
$('.select2.select2-container').remove();
$('.select2').select2();
  1. 我将选择值更改为空
  2. 我删除了select2的容器
  3. Re-call select2
小开

与Select2版本4.0.9这适用于我:

$( "#myselect2" ).val('').trigger('change');
小开
所以，要重置表单，有些人会有一个重置按钮。 在脚本标记

中添加以下代码 
$('.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([]);
});
小开

如果你想在关闭一个模态时清除所有的select2输入，那么你可以添加一个类“select2”，并将它们都设置回它们的占位符，如下所示。

$('#myModal').on('hidden.bs.modal', function (e) {
$(this)
.find(".select2").select2({placeholder: "Choose an option"})
.val('').trigger('change.select2');
});
这种一次性全部重置的方法也可以用于表单。 我使用的版本是4.0.10

小开

从select2网站，

$("#mySelect2ControlId").val(null).trigger("change");
小开 
$("#customers_select").val([]).trigger('change')

这将删除值和最重要的是我-它也删除了一个 空x按钮

小开

这个解决方案为我工作(Select2 4.0.13)

$('#select').on("select2:unselecting", function (e) {
$(this).val('').trigger('change');
e.preventDefault();
});
小开 
<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");
});
小开

我已经阅读了所有的答案，其中很多都不赞成。

这是当前清除和设置占位符值的方法:

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

这为我工作使用select2版本select2 4.0.5 $('.classToClear').select2().val(''); < / p >

小开

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

重置或清除select2输入。

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

即。

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

使用Select2管理lte 3。

经过多次尝试，这对我来说是有效的:

库位于顶部(如果与bootstrap冲突，则修改位置)

<link rel="stylesheet" href="/template/almasaeed2010/adminlte/plugins/select2/css/select2.min.css" >
<link rel="stylesheet" href="/template/almasaeed2010/adminlte/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css" >

JS脚本(在JQuery之后，在.select2(...脚本之前)

<script src="/template/almasaeed2010/adminlte/plugins/select2/js/select2.full.min.js"></script>

超文本标记语言

<select name="mode_de_reglement" id="mode_de_reglement" >
<option value="cheque">cheque</option>
<option value="virement">virement</option>
<option value="carte_bancaire">carte bancaire</option>
</select>

初始化脚本:

$("#mode_de_reglement").select2({
placeholder : "Mode de réglement"
});
$('#mode_de_reglement').val('');//setting starting value to empty because by default it selects the first value
$('#mode_de_reglement').trigger('change');//change to let the select2 library know you modified the value programmatically

最后，每当窗体重新打开时，我再次使用刷新选择:

//... onclick="openModalNewRecord()"
$('#mode_de_reglement').val('');
$('#mode_de_reglement').trigger('change');

下面是我使用的模板AdminLte3

也注意，你可以使用

$("#mode_de_reglement").select2({
placeholder : "Mode de réglement" ,
allowClear : true
});

允许清除添加一个X按钮，以清除选择和显示占位符，但我不使用它，除非该字段在数据库中为空。

小开 
$('#select_id').select2('data', null);

重置select2并显示占位符

小开

好的，那么实际的解决方案(对于一个常见的情况，你有一个&;selected item&;禁用和选择的第一项)，是非常简单的，实际上:

$("select.select2").trigger("reset").trigger("change")

提交答案