动态form表单_动态设置form表单的元素值
2017-12-19 13:42:59  By: dwtedx

• dwtedx
• JQuery教程
• 1
• 744
• 0

因为经常用到的功能，所以我想到封装一个函数，用起来更方便快捷。

先来看效果图如下：

这就相当于 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的留言板）

感谢你的访问，祝你生活愉快、工作顺心、欢迎常来逛逛。