动态添加表单行时根据下拉选择控制地址验证及字段必填规则

修改后完整JS代码 #

$("#add_nominee").click(function(e){ 
  e.preventDefault();
  // 克隆的时候清空输入值，保持原有结构
  $("#nominee_section").clone().find(":input").val("").end().appendTo(".attach_nominee");       
});
//Remove Nominee
$("#rem_nominee").click(function(e){ 
  e.preventDefault();
  $('.attach_nominee').children().last().remove();
});

// 新增：亲属关系下拉框变更监听，用事件委托适配动态新增行
$(document).on('change', '.relation_text_field', function() {
  const selectedVal = $(this).val();
  // 找到当前行对应的地址字段
  const addressField = $(this).closest('tr').find('textarea[name*="address"]');
  // 其余字段保持必填无需修改，仅处理地址字段的校验
  if(selectedVal === 'Child_1' || selectedVal === 'Child_2') {
    addressField.removeAttr('required');
  } else {
    // 切换回其他亲属关系时恢复地址必填校验，可根据需求决定是否保留这段逻辑
    addressField.attr('required', 'true');
  }
});

注意事项 #

• 上述代码用事件委托机制绑定change事件，不管是初始行还是后续点击新增按钮生成的行，下拉框变更都会触发逻辑，无需额外处理克隆事件的问题
• 仅对地址字段做required属性的增删，其余所有字段的必填校验不受影响，符合选择Child_1/Child_2时其余字段仍需必填的要求
• 建议先修复原有HTML代码中select标签缺失</select>闭合标签的问题，避免DOM解析异常导致选择器不生效

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