Javascript JQuery - 表单重置 - 排除“选择”框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2002957/
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 - Form Reset - Exclude "Select" box
提问by Jake
All,
全部，
I can reset all my form elements using the following JQuery Syntax:
我可以使用以下 JQuery 语法重置所有表单元素：
('#myform')[0].reset();
How can I modify this to exclude the reset of "select box" values?
如何修改它以排除“选择框”值的重置？
Thanks
谢谢
回答by Gabriele Petrioli
To everyone..
给大家..
the reset function does not set everything to '' (empty string)
重置功能不会将所有内容都设置为 ''（空字符串）
it reset to their initial values .. (stored in the value attribute, or selected option etc..)
它重置为它们的初始值..（存储在 value 属性中，或选择的选项等..）
If you want to maintain the default reset features then you should
如果你想保持默认的重置功能，那么你应该
- get all the
<select>elements - get their currently selected values
- reset the form as you currently do
- re-set the selected
- 获取所有
<select>元素 - 获取他们当前选择的值
- 像现在一样重置表单
- 重新设置所选
example:
例子：
<script type="text/javascript">
$(document).ready(
function(){
$("#resetbutton").click(
function(){
var values = [];
var selected = $("select").each(
function(){
values.push( $(this).val());
});
this.form.reset();
for (i=0;i<selected.length;i++)
$(selected[i]).val(values[i]);
});
}
);
</script>
回答by David Hellsing
That's not jQuery, it's native javascript. [0] brings out the actual DOM element, so it's the same as:
那不是 jQuery，而是原生 javascript。[0] 带出实际的 DOM 元素，所以它与：
document.getElementById('myform').reset();
reset()is a built-in browser implementation that resets the entire form. If you need to reset individual form types, try something like:
reset()是一个内置的浏览器实现，可以重置整个表单。如果您需要重置单个表单类型，请尝试以下操作：
$('#myform :text').val('');
You can see all form selectors here: http://docs.jquery.com/Selectors
您可以在此处查看所有表单选择器：http: //docs.jquery.com/Selectors
回答by Lance McNearney
You can do a fake reset by setting the values to an empty string and resetting the checkboxes using David's answer (or this more complete one). You could also try storing each select element's value before resetting the form and then restore the values after:
您可以通过将值设置为空字符串并使用 David 的答案（或更完整的答案）重置复选框来进行假重置。您还可以尝试在重置表单之前存储每个选择元素的值，然后在之后恢复值：
var myform = $('#myform');
var selects = $('select', myform);
// Store each current value
selects.each(function() {
$(this).data('previous', $(this).val());
});
myform[0].reset();
// Restore the values
selects.each(function() {
$(this).val($(this).data('previous'));
});
回答by Keith Wagner
For whatever reason, David's right-on answer error'd my Google Chrome js. It's saying:
无论出于何种原因，David 的正确回答错误了我的 Google Chrome js。是说：
Uncaught TypeError: Property 'reset' of object # is not a function
未捕获的类型错误：对象 # 的属性“重置”不是函数
...so I decided to try a slightly different solution:
...所以我决定尝试一个稍微不同的解决方案：
- Give native browser reset buttons attributes "hidden" and set "id":
- 给原生浏览器重置按钮属性“隐藏”并设置“id”：
<input id="resetbutton" type="reset" style="visibility:hidden;" name="reset" value="reset" />
<input id="resetbutton" type="reset" style="visibility:hidden;" name="reset" value="reset" />
- Initiate JQuery "click" event on reset button from clicking link:
- 通过单击链接在重置按钮上启动 JQuery“单击”事件：
<a href="#" onclick="$('#resetbutton').click();">Reset</a>
<a href="#" onclick="$('#resetbutton').click();">Reset</a>
