首页 > 代码库 > 基于JQuery实现表单元素值的回写
基于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="http://www.mamicode.com/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="http://www.mamicode.com/9999">---请选择---</option> <option value="http://www.mamicode.com/591">福州</option> <option value="http://www.mamicode.com/592">厦门</option> <option value="http://www.mamicode.com/593">宁德</option> </select><br/> 性别:<input id="sex" name="sex" type="radio" value="http://www.mamicode.com/11">男 <input id="sex" name="sex" type="radio" value="http://www.mamicode.com/12">女<br/> 兴趣:<input id="enjoy" name="enjoy" type="checkbox" value="http://www.mamicode.com/1">AA <input id="enjoy" name="enjoy" type="checkbox" value="http://www.mamicode.com/1">BB <input id="enjoy" name="enjoy" type="checkbox" value="http://www.mamicode.com/1">CC <input id="enjoy" name="enjoy" type="checkbox" value="http://www.mamicode.com/1">DD <input id="enjoy" name="enjoy" type="checkbox" value="http://www.mamicode.com/1">EE <input id="enjoy" name="enjoy" type="checkbox" value="http://www.mamicode.com/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=http://www.mamicode.com/=value){"selected","selected"); } }); }, //设置radio setRadio:function(key,value){ $(":radio[name=‘"+key+"‘]").attr("checked",false); $(":radio[value=http://www.mamicode.com/‘"+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实现表单元素值的回写
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。