jQuery：如何制作一个清晰的按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3925781/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery: How to make a clear button?
提问by randomizertech
I have a search field, and I need a clear button.
我有一个搜索字段，我需要一个清除按钮。
I currently have the button, but I don't know how to do it,
我现在有按钮，但我不知道怎么做，
I have 6 textfields, 2 comboboxes, and 2 multiple select lists
我有 6 个文本字段、2 个组合框和 2 个多选列表
How do I clear all of them in one clear function?? I know the HTML way, but I am using Grails and the type="reset" does not work. That's why I want a jQuery way of deleting textboxes' values, leaving the combobox in the first index, and clear all options from the multiple select list.
如何在一个清除功能中清除所有这些？我知道 HTML 方式，但我使用的是 Grails 并且 type="reset" 不起作用。这就是为什么我想要一种删除文本框值的 jQuery 方式，将组合框保留在第一个索引中，并清除多选列表中的所有选项。
Thanks for the help :D
感谢您的帮助：D
回答by BrunoLM
If you have a form just add a input with type reset
如果你有一个表单，只需添加一个输入类型 reset
<input type="reset" value="Clear the Form" />
If you can't use this, then save the default values using .dataand retrieve them on you reset the form.
如果您不能使用它，则使用保存默认值.data并在您重置表单时检索它们。
$("#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
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>
To clear all inputs and remove all options on selectelements its more simple, see this example on jsFiddle(same html).
要清除所有输入并删除select元素上的所有选项更简单，请参阅 jsFiddle（相同 html）上的此示例。
$("#container :button").click(function() {
$("#container :text").val("");
$("#container select").empty();
});
回答by bla
You can modify the code below to suit your needs. It's stolen from this threadanyway.
您可以修改下面的代码以满足您的需要。无论如何，它是从这个线程中偷来的。
$(':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>
EDIT (To clear multiple select):
编辑（清除多选）：
$('#reset').click(function(){
$(':input','#myform')
.not(':button, :submit, :reset, :hidden')
.val('')
.removeAttr('checked')
.removeAttr('selected');
$("#myform #multiple").empty();
});?
回答by Gabe
Use Lee Sy En'ssolution that he found on SO. It's much better and takes care of everything.
使用 他在 SO 上找到的Lee Sy En 的解决方案。它好多了，可以照顾一切。
$('#myClearButton').click(function() {
$('#myTextBox').val('');
$('#myComboBox').val('0'); // set to default value as an example i use 0
});
