JQuery中如何重置(reset)表单
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JQuery中如何重置(reset)表单相关的知识,希望对你有一定的参考价值。
参考技术A 由于JQuery中,提交表单是像下面这样的:Java代码$('#myform').submit()$('#myform').submit() 所以,想当然的认为,重置表单,当然就是像下面这样子喽:Java代码$('#myform').reset()$('#myform').reset()但是,不幸的是,这样写的话,会有一个让你很郁闷的结果,那就是,表单无法重置!后来,上网查了一下,说是,JQuery中没有reset方法,经核对,果然是没有。那有么没有办法通过JQuery来重置表单呢,答案是有的,不过是一种间接的方法,如下:Java代码$('#myform')[0].reset()也就是通过调用 DOM 中的reset方法来重置表单。本回答被提问者采纳 参考技术B <form id="form1" action="" method="post" runat="server"><input name="inp" id="inp" value="1" />
<input id="res" name="res" type="reset" style="display:none;" />
</form>
$("input[name='res']").click(); 参考技术C 代码如下:
<form id="form1" action="" method="post" runat="server">
<input name="inp" id="inp" value="1" />
</form>
方法一:
我们可以通过就是id实现 ,代码如下:
document.getElementById("form1").reset();
通过name实现,代码如下:
document.formName.reset();
方法二:
逐一清空,代码如下:
$("#inp").val("1");
但是表单太多的话可以如下写,代码如下:
$("input").val("");
设表单的默认值加type为reset的input ,代码如下:
<form id="form1" action="" method="post" runat="server">
<input name="inp" id="inp" value="1" />
<input id="res" name="res" type="reset" style="display:none;" />
</form>
<script>
$("input[name='res']").click();
</script>
资料参考:http://www.jb51.net/article/40325.htm
如何使用jquery重置表单中的多个选择框?
【中文标题】如何使用jquery重置表单中的多个选择框?【英文标题】:How to reset multiple select boxes in a form with jquery? 【发布时间】:2014-09-06 10:07:59 【问题描述】:如何使用 jquery 重置表单中的多个选择框?
有多个选择框 它们是动态生成的,我们不知道它们会是什么 某些框选项标签将被标记为选中 小提琴:http://jsfiddle.net/Qnq82/到目前为止,它会重置除选择之外的所有内容。
$('button#reset').click(function()
$form = $('button#reset').closest('form');
$form.find('input:text, input:password, input:file, select, textarea').val('');
$form.find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
$form.find('select').selectedIndex = 0;
);
添加了一些标记:
<form id="form" name="form" method="post" class="form" role="form" action="inventory-search" enctype="multipart/form-data">
<div class="form-group">
<label for="grade">Grade</label>
<select name="grade" class="form-control input-sm" onchange="this.form.submit();">
<option value="">Any</option>
<option value="opt1">opt1</option>
<option value="opt2" selected="selected">opt2</option>
</select>
</div>
<!-- there are 6 more select controls -->
<div class="form-group">
<label> </label>
<button type="submit" name="search" id="search" value="search" class="btn button-sm btn-primary">Search</button>
</div>
<div class="form-group">
<label> </label>
<button type="reset" name="reset" id="reset" value="reset" class="btn button-sm btn-primary">Reset</button>
</div>
</form>
【问题讨论】:
虽然在大多数情况下将selectedIndex
设置为0 会起作用,但它不会真正重置select
元素。它只是选择第一个选项。对于您的其他表单元素也是如此。但是,如果您想这样做,请使用 .prop
: $form.find('select').prop('selectedIndex', 0);
。您正在将 DOM API 与 jQuery API 混合使用。
你能告诉我们标记吗,我试过了?
“某些框选项标签将被标记为选中”,您是要重置为这些值还是始终要选择第一个选项? FWIW,在这种情况下,标记是无关紧要的。但你似乎在听除了我以外的其他人:)
哦,我刚刚看到您甚至还有一个名为“重置”的按钮。您可能还想更改它,因为默认重置按钮 <input type="Reset" />
会重置我描述的值(将值更改回 HTML 中定义的值)。
因为<button type="reset" ..>
。正如我在之前的评论中解释的那样。如果您在事件处理程序的末尾放置一个alert
,您可以看到它如何首先选择第一个选项,然后将值重置为默认值:jsfiddle.net/Qnq82/8。有关按钮类型的更多信息,请参阅developer.mozilla.org/en-US/docs/Web/HTML/Element/…。 (事实证明 HTML 并不是无关紧要的;))
【参考方案1】:
这将起作用:-
$form.find('select').prop('selectedIndex',0);
【讨论】:
【参考方案2】:我使用此代码成功取消选择表单中的所有 html 选择:
$("#form1").find('select').prop('selectedIndex', -1);
【讨论】:
【参考方案3】:我在 *** 上尝试并搜索了很多,但没有找到任何重置多选的解决方案。然后我找到了 This Link。这解决了我的问题。 这是代码示例。
$("#yourcontrolid").multiselect('clearSelection');
【讨论】:
【参考方案4】:把最后一行改成这样:
$form.find('select')[0].selectedIndex = 0;
selectedIndex
是 HTMLElement
的属性,而不是 jQuery 对象。
如果你知道值,那么你可以$form.find('select').val('value');
【讨论】:
我们不知道值并且有几个选择框。 不起作用。 ~ 可能是因为该选项被选中="selected" ?【参考方案5】:以下代码对我有用:
$('.formID').find('select[id="selectID1"]').removeAttr('selected').trigger('change');
$('.formID').find('select[id="selectID2"]').removeAttr('selected').trigger('change');
【讨论】:
【参考方案6】:$form.find('select').each(function()
$(this).val($(this).find('option:first').val());
);
这个对我有用...
【讨论】:
以上是关于JQuery中如何重置(reset)表单的主要内容,如果未能解决你的问题,请参考以下文章