使用jQuery从关联数组填充表单

Vas*_*sil 8 javascript jquery

上次我询问了相反的过程,得到了一些非常有效的答案.我的目标是最少的代码行.我有一种字段形式和{fieldname:data}格式的关联数组,我想用它填充相应的表单.

Ada*_*ire 10

如果表单元素的ID设置为fieldname:

$.each(myAssocArry, function(i,val) { $('#'+i).val(val); });
Run Code Online (Sandbox Code Playgroud)


J5.*_*J5. 7

当我为一个项目做这个时,我发现设置选择字段,单选按钮和复选框的值需要更复杂的代码,类似于:


jQuery.each(data, function (name,value) {
  jQuery("input[name='"+name+"'],select[name='"+name+"']").each(function() {
    switch (this.nodeName.toLowerCase()) {
        case "input":
            switch (this.type) {
                case "radio":
                case "checkbox":
                    if (this.value==value) { jQuery(this).click(); }
                    break;
                default:
                    jQuery(this).val(value);
                    break;
            }
            break;
        case "select":
            jQuery("option",this).each(function(){
                if (this.value==value) { this.selected=true; }
            });
            break;
    }
  });
});
Run Code Online (Sandbox Code Playgroud)

我没有测试过这段代码,所以我希望没有愚蠢的语法错误,我应该抓住它.希望这可以帮助.

我不允许在这里评论这些评论,所以....正如评论中所指出的,jQuery .val(val)方法处理设置单选按钮,复选框和选择.

您仍然需要将select [name = ...]放入jQuery选择器模式中,否则select元素将不会更新.

  • 看看val()函数.我相信,它会为你处理所有这些案件. (3认同)

Era*_*rin 5

或者类似于之前使用字段名称而不是ID的建议:

$.each(data, function(name,value) {
    $("input[name='" + name + "']").val(value);
});
Run Code Online (Sandbox Code Playgroud)