动态form表单_动态设置form表单的元素值
2017-12-19 13:42:59 By: shinyuu
因为经常用到的功能,所以我想到封装一个函数,用起来更方便快捷。
先来看效果图如下:
这就相当于 ajax 返回的json, 元素是通过 name 来查找的, 其基本形式: name : value ,checkbox 比较特殊,它是多个并存,所以要 "选中" 它得通过值来查找, 值对上了,就把它"选中"
var data = {a:´aaaa´, b:´2´, ´c´:[1,2,4]}
当然, 还有清除数据的情况:
var data = {a:´´, b:´´, ´c´:´´}
像这样,设置为空值,就可以了。说到这里,是不是很好玩呀?ok,下面就是基于 jqery 写的代码:
<form id="form1" > <input type="text" name="a" /> <br/> <input type="radio" name="b" value="1" checked />1 <input type="radio" name="b" value="2" />2 <input type="radio" name="b" value="3" />3 <br/> <input type="checkbox" name="c[]" value="1" />a <input type="checkbox" name="c[]" value="2" />b <input type="checkbox" name="c[]" value="3"/>c <input type="checkbox" name="c[]" value="4"/>d </form> <script type="text/javascrip"> //编辑表单 $.fn.formEdit = function(data){ //data = {"text":"value", "checkbox":[1,2,4], "radio":"10"}; if(typeof data == "undefined"){ this.reset(); return this; } return this.each(function(){var input, name; for(var i = 0; i < this.length; i ){ input = this.elements[i]; //修正checkbox if(input.type == "checkbox"){ name = input.name.replace(/(. )[]$/, "$1"); }else{ name = input.name; } if(typeof data[name] == "undefined") continue; switch(input.type){ case "checkbox": if(data[name] == ""){ input.checked = false; }else{ //数组查找元素 if(data[name].indexOf(input.value) > -1){ input.checked = true; }else{ input.checked = false; } } } break; case "radio": if(data[name] == ""){ input.checked = false; }else if(input.value == data[name]){ input.checked = true; } break; default: input.value = data[name]; } } }) }; data = { "a":"张三", "b":[1,3,4], "c":"2", }; $(´#form1´).formEdit(data); </script>
若资源对你有帮助,浏览后有很大收获,不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力。
想获取DD博客最新代码,你可以扫描下方的二维码,关注DD博客微信公众号(ddblogs)。
或者你也可以关注我的新浪微博,了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)
如对资源有任何疑问或觉得仍然有很大的改善空间,可以对该博文进行评论,希望不吝赐教。
为保证及时回复,可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)
感谢你的访问,祝你生活愉快、工作顺心、欢迎常来逛逛。
shinyuu 2018-01-17 10:44:12 1 评 | 回复
2018网赚新项目,抢先机--我的座右铭:做不到日赚万元,死不瞑目!一辈子只做好一件事! 1.2018年最有潜力的赚钱项目,目前红利期不要错过。 2.稳定,每天赚个500-1000左右,我已经持续了一个多月,不然我也教不了你。 3.正规项目,可以长期操作。真正想赚钱的我可以教你,你赚了钱再来拜师。 4.好项目经得起考验,绝对不是垃圾项目,说的再好,你不做也是枉然。 5.虽然我不是大师,但是我能带你月赚万元绝没问题,直接复制我的就OK,不懂手把手教。 做网赚,别想一步登天,不是每个人都能赚钱的。如果,你没有坚定的信念,还是老老实实去上 班吧! 想清楚了再加我的微信,我要的是你勇往向前的决心,微信sgvg6666 (写验证码126,加我必通过) 我的座右铭:做不到日赚万元,死不瞑目!一辈子只做好一件事!