使用 jQuery 使用关联数组中的数据填充表单答案

【问题标题】：Populate a form with data from an associative array with jQuery使用 jQuery 使用关联数组中的数据填充表单
【发布时间】：2010-09-15 09:51:20
【问题描述】：

上次I asked about the reverse process，得到了一些非常有效的答案。我的目标是最少的代码行。我有一个字段形式和一个 {fieldname:data} 格式的关联数组，我想用它填充相应的表单。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

如果您的表单元素的 ID 设置为字段名：

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

【讨论】：

这会漏掉复选框。它不检查它们，而是更改为它们定义的值。

【解决方案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;
    }
  });
});

我没有测试过这段代码，所以我希望没有我应该发现的愚蠢的语法错误。希望这会有所帮助。

我还不能在这里评论 cmets，所以.... 如评论中所述，jQuery .val(val) 方法处理设置单选按钮、复选框和选择。

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

【讨论】：

看看 val() 函数。我相信它会为您处理所有这些案件。
工作正常，但 val() 函数确实处理了 select 和其他类型，所以你不必使用开关，一个简单的 jQuery(this).val(value)案例就够了。

【解决方案3】：

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

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

【讨论】：

很好的答案，但不会选择选择框或文本区域。也许将 "input[name=...]" 更改为 "*[name=...]" ？另外，我刚刚修复了您代码中的语法错误。
我不确定 '*' 是否可行，如果可行，它可能会有点密集。您可以添加以逗号分隔的其他选项 - $("input[name...],select[name...],textarea[name...]).val...
你可以做 $(":input[name=...") 它应该选择选择和文本区域（注意冒号）。

【解决方案4】：

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

我通常也不想改变按钮式输入的值，所以我将它们过滤掉。

这是一个处理数组换行、按钮过滤以及将输入选择限制为给定表单元素的函数。表单参数是可选的。如果离开/空/未定义，则页面上的所有输入都将被选中。

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

【讨论】：