html下拉菜单重置,使用重置button重置下拉菜单中的select2值

最新推荐文章于 2023-04-18 11:18:36 发布

Oralas

最新推荐文章于 2023-04-18 11:18:36 发布

阅读量1.1k

点赞数

文章标签： html下拉菜单重置

我会尝试这样的事情：

$(function(){ $("#searchclear").click(function(){ $("#d").select2('val', 'All'); }); });

您也可以使用重置select2值

$(function() { $('#d').select2('data', null) })

或者你可以传递'allowClear': true当调用select2时为'allowClear': true ，它将有一个Xbutton来重置它的值。

根据这里logging的最新版本(select2 3.4.5)，它将如下简单：

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

版本4.0

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

从现在开始，根据在debugging模式下抛弃的消息，这是正确的解决scheme：“ select2("val")方法已被弃用，将在以后的Select2版本中被删除，使用$element.val()

你可以使用：

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

这很简单，工作正确！如果使用复位button：

$('#btnReset').click(function() { $("#d").val(null).trigger("change"); });

最好的方法是：

$('#e1.select2-offscreen').empty(); //#e1 : select 2 ID $('#e1').append(new Option()); // to add the placeholder and the allow clear

我看到三个问题：

当由于表单重置而改变其值时，Select2控件的显示不会被刷新。

“全部”选项没有value属性。

“全部”选项被禁用。

首先，我build议您使用setTimeout函数来确保在表单重置完成后执行代码。

当button被点击时，你可以执行代码：

$('#searchclear').click(function() { setTimeout(function() { // Code goes here. }, 0); });

或者当表单被重置时：

$('form').on('reset', function() { setTimeout(function() { // Code goes here. }, 0); });

至于使用什么代码：

由于“全部”选项被禁用，表单重置不会使其成为选定的值。因此，您必须明确地将其设置为选定的值。要做到这一点的方法是使用Select2“val”函数。而且由于“全部”选项没有value属性，其值与它的文本“全部”相同。因此，您应该在选定的答案中使用由thtsigma给出的代码：

$("#d").select2('val', 'All');

如果要将属性value=""添加到“全部”选项，则可以使用Daniel Dener给出的代码：

$("#d").select2('val', '');

如果“All”选项没有被禁用，那么你只需要强制Select2刷新，在这种情况下你可以使用：

$('#d').change();

注意：Lenart的以下代码是清除select的一种方法，但不会导致select“全部”选项：

$('#d').select2('data', null)

如果您有一个填充select小部件，例如：

onetwothree ...

你会希望说服select2恢复最初select的值在复位，类似于本地的forms工作。要实现这一点，首先重置本机窗体，然后更新select2：

$('button[type="reset"]').click(function(event) { // Make sure we reset the native form first event.preventDefault(); $(this).closest('form').get(0).reset(); // And then update select2 to match $('#d').select2('val', $('#d').find(':selected').val()); }

我发现的作品很好，如下所示：

如果您有一个占位符选项，如“全部”或“select”，并且它是第一个选项，那就是您希望在“重置”时设置值，您可以使用

$('#id').select2('val',0);

0本质上是您想要在重置时将其设置为的选项。如果你想设置它的最后一个选项，然后获取选项的长度，并设置它的长度 – 1.基本上使用任何选项的索引，你想设置的select2值重置。

如果您没有占位符，并且只希望在该字段中不显示任何文本，请使用：

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

为了实现一个通用的解决scheme，为什么不这样做：

$(':reset').live('click', function(){ var $r = $(this); setTimeout(function(){ $r.closest('form').find('.select2-offscreen').trigger('change'); }, 10); });

这样：您不必为应用程序中的每个select2创build新的逻辑。

而且，您不必知道默认值(顺便说一句，不必是""甚至是第一个选项)

最后，将值设置为:selected将不会总是实现真正的重置，因为当前select的可能已经在客户端上以编程方式设置，而form select的默认操作是将input元素值返回到服务器发送的值。

编辑：另外，考虑到不赞成使用的状态，我们可以用这个replace第一行：

$('form:has(:reset)').on('click', ':reset', function(){

或更好：

$('form:has(:reset)').on('reset', function(){

PS：我个人觉得复位重置，以及触发blur和focus事件附加到原来的select，是一些最显眼的“缺失”的function在select2！

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

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

而且，如果你有多个Select2的forms相同的话，你就可以用这个命令重新设置它们。

有时我想重置Select2，但是我不能没有更改()方法。所以我的解决scheme是：