Question

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

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

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

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

感谢您的帮助：D

Answer 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();
});

Answer 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

Answer 3

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

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

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

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

3 个答案: