首先我必须说几乎所有的人都不需要自己实现表单重置的功能,表单重置功能只需要一个reset
类型的input
就足够了。<input type="reset" />
当你万不得已时,不妨考虑下我下面的做法,但必须做下提醒,以下代码不可取,而当你的表单中使用到的控件不多时,或者你有其他办法时,那么就无须浪费时间阅读下面的代码了
function resetForm(ele) {
$(ele).closest('table').find('input, select').val(function(){
if(this.tagName == 'SELECT'){
var options = this.options;
var that = this;
for(var i = 0; i < options.length; i++) {
if(options[i].defaultSelected){
return options[i].value;
}
}
return options[0].value;
}
return this.defaultValue;
});
}
我先放上来我正在使用的代码,需要引入jQuery
,因此就没有通用性,另外代码中还包含JavaScript
原生代码,两种混杂属不可取的地方
将resetForm
方法在HTML
代码中调用大概是:<input type="button" onclick="resetForm(this)" />
resetForm
方法中只尝试将input
和select
重置为默认值,input
类型的比较简单,直接取该对象的defaultValue
(此处我竟然不知道这个对象是不是DOM对象);对于select
类型需要对它的所有option
进行遍历,判断是否是默认选择(defaultSelected),然后返回该option
的值。实际上如果知道哪个option
是默认选择项,也可以将option
的序号赋值给select
对象的selectedIndex
属性而达到重置的效果。
表单中还可能使用radio
、checkbox
等控件,这里并没有打算拓展resetForm
功能,不过我认为,这些控件都可以通过它们的默认值(defaultValue)或者默认选择(defaultSelected)相关信息进行重置吧。
(还真无聊)
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。