重置select2值并显示占位符
如何通过select2设置值重置的占位符。 在我的例子中如果位置或成绩select框被点击，我的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; } }); 您必须将select2定义为
$("#customers_select").select2({ placeholder: "Select a customer", initSelection: function(element, callback) { } });
重置select2
$("#customers_select").select2("val", "");
Select2已经改变了他们的API：
Select2：
select2("val")方法已被弃用，将在以后的Select2版本中被删除。 使用$ element.val（）来代替。
现在做这个最好的方法是：
$('#your_select_input').val('');
编辑：2016年12月意见build议，下面是更新的方式来做到这一点：
$('#your_select_input').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')
唯一可以为我工作的是：
$('select2element').val(null).trigger("change")
我正在使用版本4.0.3
Select2使用一个特定的CSS类，所以一个简单的方法来重置它：
$('.select2-container').select2('val', '');
而且，如果你有多个Select2的forms相同，你就可以用这个命令重新设置它们。
删除选定的值
$('#employee_id').select2('val','');
清除选项值
$('#employee_id').html('');
我知道这是一个古老的问题，但这对于select2版本4.0是有效的
$('#select2-element').val('').trigger('change');
要么
$('#select2-element').val('').trigger('change.select2');
如果你有改变事件绑定到它
用这个 ：
$('.select').val([]).trigger('change');
发生这种情况通常意味着您的<select>的第一个选项没有空白<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>
我也有这个问题，它源于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
对于加载远程数据的用户， 这将重置select2到占位符，而不会触发ajax。 适用于v4.0.3：
$("#lstProducts").val("").trigger("change.select2");
使用以下来configurationselect2
$('#selectelementid').select2({ placeholder: "Please select an agent", allowClear: true // This is for clear get the clear button if wanted });
并以编程方式清除selectinput
$("#selectelementid").val("").trigger("change"); $("#selectelementid").trigger("change");
我已经尝试了以上的解决scheme，但没有使用4x版本。
我想实现的是：清除所有选项，但不要触摸占位符。 这段代码适用于我。
selector.find('option:not(:first)').remove().trigger('change');
我尝试了上述解决scheme，但它并没有为我工作。
这是一种破解，你不必触发改变。
$("select").select2('destroy').val("").select2();
要么
$("select").each(function () { //added a each loop here $(this).select2('destroy').val("").select2(); });
从v.4.0.x开始
清除值，但也恢复占位符使用… … –
.html('<option></option>'); // defaults to placeholder
如果它是空的，它会select第一个选项，而不是你想要的
.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");
在使用$("#customers_select").select2("val", "");清除值之前， $("#customers_select").select2("val", ""); 尝试将重点设置为任何其他控制重置点击。
这将再次显示占位符。
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'）; 如果您想closures打开的build议下拉菜单，则在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元素中必须存在一个空的选项
你可以通过清除select
$（ '＃对象'）空（）;
但它不会让你回到你的占位符。
所以它是一个半解决scheme
使用select2版本3.2这为我工作：
$('#select2').select2("data", "");
不需要实现initSelection
在尝试了前10个解决scheme并失败后，我发现这个解决scheme是可行的（参见“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]); ;，我在上面显示。
我的解决scheme是：
$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'); });
为了重置值和占位符我只是重新启动select2元素：
$( "#select2element" ).select2({ placeholder: '---placeholder---', allowClear: true, minimumResultsForSearch: 5, width:'100%' });
