重置select2值并显示占位符-Java 学习之路

162

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

30 回答

我的解决方案是：

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

回复于 2024-04-25T06:05:29+08:00

2

我不知道是否有其他人经历过这种情况，但是一旦代码触发了触发器（'更改'），我的javascript就停止了，从未返回触发器，其余的功能从未执行过 .

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

回复于 2024-04-25T06:05:29+08:00
30

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

这将再次显示占位符 .

回复于 2024-04-25T06:05:29+08:00
0
好吧，每当我这样做
```
$('myselectdropdown').select2('val', '').trigger('change');
```
经过三到四次触发后，我开始陷入某种迟滞 . 我想有一个内存泄漏 . 它不在我的代码中，因为如果我删除这一行，我的应用程序是滞后的 .

由于我将allowClear选项设置为true，因此我选择了
```
$('.select2-selection__clear').trigger('mousedown');
```
接下来是$（'myselectdropdown'） . select2（'close'）; select2 dom元素上的事件触发器，以防您想要关闭打开的建议下拉列表 .
回复于 2024-04-25T06:05:29+08:00
0
Select2更改了他们的API：

Select2：不推荐使用select2（“val”）方法，将在以后的Select2版本中删除 . 请改用$ element.val（） .

现在最好的方法是：
```
$('#your_select_input').val('');
```
Edit: December 2016 评论表明以下是更新的方法：
```
$('#your_select_input').val([]);
```
回复于 2024-04-25T06:05:29+08:00
1
对我来说唯一可行的是：
```
$('select2element').val(null).trigger("change")
```
我使用的是4.0.3版

Reference

According to Select2 Documentation
回复于 2024-04-25T06:05:29+08:00

您必须将select2定义为

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

要重置select2

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

回复于 2024-04-25T06:05:29+08:00

2
使用select2版本3.2这对我有用：
```
$('#select2').select2("data", "");
```
不需要实现 initSelection
回复于 2024-04-25T06:05:29+08:00

在这里尝试了前10个解决方案并且失败后，我发现this解决方案正常工作（请参阅页面上的"nilov commented on Apr 7 • edited"评论）：

(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]); ，我在上面说明了这一点 . ）

回复于 2024-04-25T06:05:29+08:00

4
将此代码用于您的js文件
```
$('#id').val('1');
$('#id').trigger('change');
```
回复于 2024-04-25T06:05:29+08:00

对于占位符

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

要重置选择2

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

希望这可以帮助

回复于 2024-04-25T06:05:29+08:00

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

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

回复于 2024-04-25T06:05:29+08:00

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

回复于 2024-04-25T06:05:29+08:00

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

所以做以下就足够了：

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

回复于 2024-04-25T06:05:29+08:00

0
Select2使用特定的CSS类，因此重置它的简单方法是：
```
$('.select2-container').select2('val', '');
```
如果您在同一个表单中有多个Select2，那么您将拥有优势，所有这些都将使用此单个命令重置 .
回复于 2024-04-25T06:05:29+08:00
194
这是正确的方法：
```
$("#customers_select").val('').trigger('change');
```
我正在使用Select2的最新版本 .
回复于 2024-04-25T06:05:29+08:00
101
一种[非常] hacky方式（我看到它适用于4.0.3版本）：
```
var selection = $("#DelegateId").data("select2").selection;
var evt = document.createEvent("UIEvents");
selection._handleClear(evt);
selection.trigger("toggle", {});
```
- allowClear必须设置为true
- select元素中必须存在一个空选项
回复于 2024-04-25T06:05:29+08:00
1
对于加载远程数据的用户，this会将select2重置为占位符而不会触发ajax . 适用于v4.0.3：
```
$("#lstProducts").val("").trigger("change.select2");
```
回复于 2024-04-25T06:05:29+08:00

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

这是一种破解，你不必触发改变 .

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

要么

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

回复于 2024-04-25T06:05:29+08:00

0
从v.4.0.x开始......

清除值，还要恢复占位符的使用...
```
.html('<option></option>');  // defaults to placeholder
```
如果它是空的，它将选择第一个选项而不是你想要的
```
.html(''); // defaults to whatever item is first
```
坦率地说...... Select2在屁股上是如此的痛苦，令我惊讶的是它还没有被取代 .
回复于 2024-04-25T06:05:29+08:00
0
您可以清除选择
```
$('#object').empty();
```
但它不会让你回到你的占位符 .

所以它的一半解决方案
回复于 2024-04-25T06:05:29+08:00

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

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

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

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

回复于 2024-04-25T06:05:29+08:00

1
用这个：
```
$('.select').val([]).trigger('change');
```
回复于 2024-04-25T06:05:29+08:00

-1

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

回复于 2024-04-25T06:05:29+08:00

0
我尝试了上述解决方案，但没有使用版本4x .

我想要实现的是：清除所有选项但不要触摸占位符 . 这段代码适合我 .
```
selector.find('option:not(:first)').remove().trigger('change');
```
回复于 2024-04-25T06:05:29+08:00
0
我知道这是一个老问题，但这适用于select2版本4.0
```
$('#select2-element').val('').trigger('change');
```
要么
```
$('#select2-element').val('').trigger('change.select2');
```
如果你有绑定的变化事件
回复于 2024-04-25T06:05:29+08:00
0
```
$('myselectdropdown').select2('val', '0')
```
其中0是下拉列表的第一个值
回复于 2024-04-25T06:05:29+08:00

接受的答案在我的案例中不起作用 . 我正在尝试这个，它正在工作：

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

回复于 2024-04-25T06:05:29+08:00

13
TO REMOVE SELECTED VALUE
```
$('#employee_id').select2('val','');
```
TO CLEAR OPTION VALUES
```
$('#employee_id').html('');
```
回复于 2024-04-25T06:05:29+08:00
14
遵循 recommended 的方式 . 在文档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>
```
回复于 2024-04-25T06:05:29+08:00

重置select2值并显示占位符

30 回答

相关问题