本文介绍一种简洁、可复用的 javascript 方法，用于遍历任意 `
在实际开发中，我们常遇到这样的需求：一个页面包含多个 <select> 下拉框（如“喜好颜色”“所在地区”等），而每个 <option> 的 value 本应与其显示文本完全一致（例如 <option value="Red">Red</option>）。但若初始 HTML 中 value 被遗漏或写错（如 <option value="">Red</option>），后续表单提交或数据处理就会出错。手动逐个修正不仅低效，更难以维护。
为此，我们可以封装一个通用函数 syncOptionValues()，它接收一个 <select> 元素（或 CSS 选择器字符串），遍历其全部 <option> 子节点，并将每个 option.value 设为 option.textContent.trim()：
function syncOptionValues(selectElOrSelector) {
const selectEl = typeof selectElOrSelector === 'string'
? document.querySelector(selectElOrSelector)
: selectElOrSelector;
if (!selectEl || selectEl.tagName !== 'SELECT') {
console.warn('Invalid <select> element or selector provided.');
return;
}
Array.from(selectEl.options).forEach(option => {
option.value = option.textContent.trim();
});
}使用时，可针对单个元素调用：
syncOptionValues(document.getElementById('fav')); // 同步 #fav 下所有 option
syncOptionValues('#loc'); // 也可传选择器字符串若需一次性同步页面中所有 <select>，可扩展为：
function syncAllSelectOptions() {
document.querySelectorAll('select').forEach(syncOptionValues);
}
syncAllSelectOptions(); // 在 DOM 加载后执行一次即可⚠️ 注意事项：
- 执行时机关键：务必在 DOM 完全加载后（如 DOMContentLoaded 或 window.onload）调用该函数，否则可能获取不到 <option> 节点；
-
禁用/占位选项处理：默认会同步所有 <option>，包括 disabled 或 selected 的占位项（如 <option disabled>请选择</option>）。若需跳过，可添加判断：
if (!option.disabled && option.index > 0) { // 跳过第一个（索引为0）且禁用的项 option.value = option.textContent.trim(); } - 避免重复执行：该函数是幂等的（多次运行结果一致），但仍建议仅在初始化阶段调用一次，防止不必要的 DOM 操作。
最后，结合你原有的表单逻辑，只需在 DOMContentLoaded 中提前同步即可：
document.addEventListener('DOMContentLoaded', () => {
syncOptionValues('#fav');
syncOptionValues('#loc');
document.getElementById('btn').addEventListener('click', addDets);
});这样，无论后续新增多少个 <select>，只需一行代码即可完成值-文本对齐，大幅提升代码可维护性与健壮性。
