jQuery：如何创建一个清晰的按钮？

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

我现在有这个按钮，但我不知道怎么做

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

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

---

感谢您的帮助：D

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

HTML

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

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

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

---

您可以根据需要修改下面的代码。反正它是从我这儿偷来的

---

组合框呢？还有多选列表？？？@fgualda87：现在呢PLOL更好，但是对于多选列表，我希望它是空的，就像删除它所有的选项一样。就像是一个搜索字段一样，我把东西添加到列表中，用“清除”按钮它应该会删除所有的东西。现在，为了演示的目的，我只需要删除这些值，也许如果我从一开始就删除它们并保持这样，它就会工作？？Thanks若要删除输入字段，只需将val设置为empty:val。若要删除所有选项，请调用empty$容器选择为空；毫无疑问，这是前进的道路+很好，几乎完美。我需要将multiple select保留为空。没有选项。每个返回jQuery集合（如val，not，removeAttr）的jQuery函数都有。每个内置函数，例如，这里是jQuery$'reset'。单击函数{$'：input'，'myform'。not'：按钮，：submit，：reset，：hidden'.val.removeAttr'checked'。removeAttr'selected'；$myform list.empty；}；美好的我已经更新了JQuery以清除多个选择框。我想知道为什么人们有清晰的按钮，它们对我来说总是毫无用处。嗯。。。让你的表格整洁有序？o_OI在这里必须同意Winston的意见，然后你填写10个字段，无意中按下clear按钮只是为了重做。没人想要一个干净的按钮。没有人想要按钮！这就是谷歌推出GoogleInstant的原因。

$("#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"));
  });
});

<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>

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

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

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

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

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