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

Question

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

Answer 1

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

$.each(myAssocArry, function(i,val) { $('#'+i).val(val); });

Answer 2

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

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;
    }
  });
});

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

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

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

Answer 3

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

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

Answer 4

我还没有看到jQuery句柄将单个（非数组）值传递给val（）以用于收音机或复选框输入。 您必须确保将单个值包装到数组中。

我通常也不想改变button-ish输入的值，所以我把它们过滤掉了。

这是一个处理数组包装，按钮过滤的函数，并且还将输入选择限制为给定的表单元素。 表单参数是可选的。 如果不使用/ null / undefined，则将选择页面上的所有输入。

function populateForm(data, form) {
    $.each( data, function(name, value) {
        var input = $(":input[name='" + name + "']:not(:button,:reset,:submit,:image)", form );
        input.val( ( !$.isArray( value ) && ( input.is(':checkbox') || input.is(':radio') ) ) ? [ value ] : value );
    } );
};