jQuery：如何制作一个清晰的按钮？答案

【问题标题】：jQuery: How to make a clear button?jQuery：如何制作一个清晰的按钮？
【发布时间】：2010-10-13 16:18:42
【问题描述】：

我有一个搜索字段，我需要一个清除按钮。

我目前有按钮，但我不知道怎么做，

我有 6 个文本字段、2 个组合框和 2 个多选列表

如何在一个清除功能中清除所有这些？我知道 HTML 方式，但我使用的是 Grails，并且 type="reset" 不起作用。这就是为什么我想要一种 jQuery 方法来删除文本框的值，将组合框留在第一个索引中，并从多选列表中清除所有选项。

感谢您的帮助：D

【问题讨论】：

codigomanso.com/en/2008/12/resetear-un-formulario-con-jquery
我想知道为什么人们有清晰的按钮，它们对我来说总是没用。
Ummm... 让您的表格整洁有序？ o_O
我必须同意 Winston 的观点，然后你填写了 10 个字段，然后不小心按下了清除按钮，只是为了重做。嗯
是的，没有人想要一个清除按钮。没有人想要任何按钮！这就是 Google 推出 Google Instant 的原因。

标签： jquery button

【解决方案1】：

如果您有一个表单，只需添加一个类型为 reset 的输入

<input type="reset" value="Clear the Form" />

如果您不能使用它，则使用.data 保存默认值并在您重置表单时检索它们。

See this example on jsFiddle

$("#container :text").each(function() {
    var $this = $(this);

    $this.data("default", $this.val());
});

$("#container select option").each(function() {
    var $this = $(this);

    $this.data("default", $this.is(":selected"));
});

$("#container :button").click(function() {
    $("#container :text").each(function() {
        var $this = $(this);
        $this.val($this.data("default"));
    });

  $("#container select option").each(function() {
      var $this = $(this);
      $this.attr("selected", $this.data("default"));
  });
});

HTML

<div id="container">
    <input type="text" value="default" />
    <select>
        <option>Op1</option>
        <option selected="true">Op2</option>
    </select>
    <select multiple="true" size="5">
        <option>Op1</option>
        <option selected="true">Op2</option>
    </select>

    <input type="button" value="reset" />
</div>

要清除所有输入并删除 select 元素上的所有选项，它更简单，see this example on jsFiddle（相同的 html）。

$("#container :button").click(function() {
    $("#container :text").val("");

    $("#container select").empty();
});

【讨论】：

@fgualda87：现在呢？ :P
LOL，好多了，但是对于多选列表，我希望它是空白的，比如删除它拥有的所有选项。就像因为是搜索字段一样，我将内容添加到列表中，并使用清除按钮清除所有内容。现在，出于演示目的，我只需要重视，也许如果我删除它们并从一开始就这样让它工作？谢谢
要删除输入字段，只需将 val 设置为空：val("")。并删除所有选项调用empty。 $("#container select").empty();

【解决方案2】：

您可以修改下面的代码以满足您的需要。反正它是从this thread 偷来的。

jsfiddle

$(':input','#myform')
 .not(':button, :submit, :reset, :hidden')
 .val('')
 .removeAttr('checked')
 .removeAttr('selected');

<form id='myform'>
    <input type='text' value='test' />
    <select id='single'>
        <option>One</option>
        <option selected="true">Two</option>
    </select>
    <select multiple="true" size="5" id='multiple'>
        <option>One</option>
        <option selected="true">Two</option>
    </select>
    <input type='button' id='reset' value='reset' />
</form>

编辑（清除多选）：

$('#reset').click(function(){
    $(':input','#myform')
    .not(':button, :submit, :reset, :hidden')
    .val('')
    .removeAttr('checked')
    .removeAttr('selected');

    $("#myform #multiple").empty();
});

jsfiddle v2

【讨论】：

这无疑是一条路。 +1
好的，几乎完美。我需要将多项选择留空。里面没有选项。
每个返回 jQuery 集合的 jQuery 函数（如 val()、not()、removeAttr()）都有内置的 .each()，例如github.com/jquery/jquery/blob/master/src/attributes.js#L18
这里是 jQuery $('#reset').click(function(){ $(':input','#myform') .not(':button, :submit, :reset, :hidden') .val('') .removeAttr('checked') .removeAttr('selected'); $("#myform #list").empty(); });
nice.. 我已经更新了 JQuery 以清除多选框。

【解决方案3】：

使用他在 SO 上找到的 Lee Sy En 的 解决方案。它好多了，可以照顾一切。

$('#myClearButton').click(function() {
  $('#myTextBox').val('');

  $('#myComboBox').val('0'); // set to default value as an example i use 0 
});

【讨论】：

组合框呢？还有多选列表？？