Bootstrap表单自动填充需用JS遍历JSON对象，按name属性匹配表单元素并赋值：对select设val()，对checkbox/radio设checked，其他设val()；注意name严格一致、option value类型匹配、动态渲染后刷新插件。
Bootstrap 本身不提供表单自动填充逻辑，所有「回显」或「预填充」行为都依赖 JavaScript 手动实现。核心是把 JSON 数据的键名与表单元素的 name 属性对齐，再逐个赋值。
如何用 JS 遍历对象填充 Bootstrap 表单
Bootstrap 表单只是带 class 的标准 HTML 表单，填充逻辑和框架无关。关键在 DOM 查找与属性匹配：
- 必须确保每个
<input>、<select>、<textarea>元素都有明确的name属性，且该 name 与 JSON 对象的 key 完全一致（包括大小写） - 不要用
id匹配——name才是表单提交依据，也是最稳定的映射字段 - 对
<select>要设置value，不是text；对复选框/单选框要检查checked状态 - 示例代码片段（jQuery）：
function fillForm($form, data) {
$.each(data, function(key, value) {
var $field = $form.find('[name="' + key + '"]');
if ($field.length === 0) return;
if ($field.is('select')) {
$field.val(value);
} else if ($field.is(':checkbox, :radio')) {
$field.prop('checked', $field.val() == value);
} else {
$field.val(value);
}
});
}
// 调用：fillForm($('#myForm'), { username: 'admin', status: 'active' });
为什么直接用 form.reset() 会清空手动输入内容
原生 form.reset() 只恢复到「初始 HTML 值」，不是上次 JS 设置的值。一旦你用 JS 动态改过 value 或 checked，它就不再被 reset() 认为是“初始状态”。
- 后果：用户填了一半又点“重置”，所有 JS 填充过的字段变空，但用户手输的字段可能残留——行为不一致
- 替代方案：自己维护一个初始数据快照，重置时调用
fillForm($form, initialData) - 更安全的做法：避免用
reset()，统一走 JS 填充逻辑，保持控制权
下拉框 <select> 填充失败的常见原因
填不上值往往不是 JS 问题，而是 DOM 结构或数据类型不匹配：
-
<select>的value必须严格等于某个<option value="xxx">的value字符串，不能是 label 文本 - 后端返回的
status: 1（数字）填不进<option value="1">？因为 jQuery.val(1)会转成字符串比较，通常没问题；但若选项是<option value="true">，而你传true，就会失败 - 动态渲染的
<select>（如 AJAX 加载完才插入 DOM），必须等option存在后再调用.val()，否则静默失败 - 使用 Bootstrap Select（
bootstrap-select）插件时，需额外调用$select.selectpicker('refresh')同步 UI
真正容易被忽略的是：表单字段是否在 DOM 中已存在、name 是否拼错、以及下拉框的 value 类型是否和数据源完全一致——这些细节不报错，但填不上，调试时得逐个 console.log($field.length) 和 console.log($field.val()) 验证。
