jQuery技术问题：如何从数组为表单数组控件赋值

嘿，我来帮你排查这个赋值失败的问题！从你的描述和代码片段来看，大概率是动态DOM元素的生命周期顺序或者选择器/索引匹配出了问题，我给你几个针对性的解决方案：

常见问题分析 & 修复方案 #

1. 先插入DOM再赋值（最常见的坑） #

你原来的代码可能是一边生成HTML字符串一边尝试给控件赋值，但这时候生成的<div class="form-row field_group">还没被添加到页面中，$('input[name="useredu_id[]"]').eq(xx)根本找不到对应的元素，自然赋值无效。

正确的顺序应该是：先把所有动态生成的DOM元素插入页面，再遍历数据给控件赋值：

// 第一步：先拼接所有需要的DOM结构
var fieldHTML = '';
$.each(data.result_qual, function(key, val1) {
    fieldHTML += '<div class="form-row field_group">' + $(".field_group_copy").html() + '</div>';
});
// 把生成的DOM插入到页面的目标容器（比如#edu_fields）
$('#edu_fields').append(fieldHTML);

// 第二步：现在页面上已经有了所有控件，再循环赋值
$.each(data.result_qual, function(key, val1) {
    var detail = data.result_detail[key];
    // 注意：下拉框是select，不是input，别写错选择器！
    $('input[name="useredu_id[]"]').eq(key).val(val1.id); // 假设val1包含id字段
    $('select[name="useredu_qual[]"]').eq(key).val(val1.qual_value);
    $('input[name="useredu_detail[]"]').eq(key).val(detail);
});

2. 更可靠的方式：克隆模板时直接赋值 #

上面的方式依赖索引eq(key)匹配，如果页面上有其他同名控件可能会干扰。更稳妥的做法是克隆模板后直接在内部赋值，再插入页面：

var targetContainer = $('#edu_fields');
$.each(data.result_qual, function(key, val1) {
    var detail = data.result_detail[key];
    // 克隆模板（保留原模板的事件绑定，比直接取html更友好）
    var fieldGroup = $(".field_group_copy").clone()
                        .removeClass('field_group_copy')
                        .addClass('field_group');
    
    // 在当前克隆的元素内部找控件赋值，完全避免索引冲突
    fieldGroup.find('input[name="useredu_id[]"]').val(val1.id);
    fieldGroup.find('select[name="useredu_qual[]"]').val(val1.qual_value);
    fieldGroup.find('input[name="useredu_detail[]"]').val(detail);
    
    // 把赋值后的元素添加到容器
    targetContainer.append(fieldGroup);
});

3. 额外检查点 #

• 确认data.result_qual和data.result_detail的长度一致，否则索引key会出现不匹配的情况；
• 检查控件的name属性是否完全正确（比如下拉框的name是useredu_qual[]，别写成input的选择器）；
• 如果模板里的控件有默认值，记得在克隆后清空再赋值，避免残留数据。

内容的提问来源于stack exchange，提问作者user5274088