基于JQuery实现表单元素值的回写
Posted llguanli
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了基于JQuery实现表单元素值的回写相关的知识，希望对你有一定的参考价值。
form.jsp:
<%@ page language="java" import="java.util.*" pageEncoding="GB2312"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html > <head> <meta http-equiv="ptable-Type" ptable="text/html; charset=GBK"> <title>表单回写</title> <script type="text/javascript" src="jquery.form_util.js"></script> <script type="text/javascript"> $(function() { var obj={ name:"张四", area:"591", sex:"11", enjoy:"100011", note:"xxxxxxxxxxx" }; FormUtil.set(obj); }); </script> </head> <body> 姓名:<input id="name" name="name" type="text"><br/> 地区:<select id="area" name="area" > <option value="9999">---请选择---</option> <option value="591">福州</option> <option value="592">厦门</option> <option value="593">宁德</option> </select><br/> 性别:<input id="sex" name="sex" type="radio" value="11">男 <input id="sex" name="sex" type="radio" value="12">女<br/> 兴趣:<input id="enjoy" name="enjoy" type="checkbox" value="1">AA <input id="enjoy" name="enjoy" type="checkbox" value="1">BB <input id="enjoy" name="enjoy" type="checkbox" value="1">CC <input id="enjoy" name="enjoy" type="checkbox" value="1">DD <input id="enjoy" name="enjoy" type="checkbox" value="1">EE <input id="enjoy" name="enjoy" type="checkbox" value="1">FF <br/> 备注:<textarea id="note" name="note" rows="10" cols="10"></textarea><br/> </body> </html>
/**表单元素回写工具
* wumingkun 2014-08-19
*/
var FormUtil={
//值回写方法
set:function(obj){
var attr;
for(attr in obj){
var element=$("#"+attr)[0];
var nodeName=element.nodeName;
if(nodeName=="INPUT"){
FormUtil.judgeType($(element).attr("type"),attr,obj[attr]);
}else if(nodeName=="SELECT"){
FormUtil.setSelect(attr,obj[attr]);
}else if(nodeName=="TEXTAREA"){
FormUtil.setValue(attr,obj[attr]);
}
}
},
//设置文本框 文本域 密码框 隐藏框
setValue:function(key,value){
$("#"+key).val(value);
},
//设置下拉框
setSelect:function(key,value){
$("#"+key+" option").each(function(){
if(this.value==value){
$(this).attr("selected","selected");
}
});
},
//设置radio
setRadio:function(key,value){
$(":radio[name=‘"+key+"‘]").attr("checked",false);
$(":radio[value=‘"+value+"‘]").attr("checked",true);
},
//设置checkbox
setCheckbox:function(key,value,isDefault){
$(":checkbox[name=‘"+key+"‘]").attr("checked",false);
if(isDefault){
var vs=value.split("");
for(var i=vs.length-1;i>=0;i--){
if(vs[i]=="1"){
$(":checkbox[name=‘"+key+"‘]").filter(":eq("+(vs.length-1-i)+")").attr("checked",true);
}
}
}else {
}
},
//input类型推断
judgeType:function(type,key,value){
if(type=="text"||type=="password"||type=="hidden"){
FormUtil.setValue(key,value);
}else if(type=="radio"){
FormUtil.setRadio(key,value);
}else if(type=="checkbox"){
FormUtil.setCheckbox(key,value,true);
}
}
};以上是关于基于JQuery实现表单元素值的回写的主要内容，如果未能解决你的问题，请参考以下文章