• 基于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>


    jquery.form_util.js:

    /**表单元素回写工具
     * 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);
    			}
    		}
    };



  • 相关阅读:
    40个Java集合面试问题和答案
    jsp九大内置对象:request、response、session、application、out、page、pageContext、config、exception
    JAVA多线程和并发基础面试问答
    线程的五大状态
    人物与动物快速抠图技巧
    实时监听数据库变化
    inter jion与WITH (NOLOCK) 排他锁(脏读)
    Win定时任务未正常运行的bug(win Server2019)
    HttpWebRequest与HttpWebResponse的关系
    A5M2 sql自动换行快捷键
  • 原文地址:https://www.cnblogs.com/llguanli/p/6844348.html
Copyright © 2020-2023  润新知