本文详解如何正确遍历并修改 <select> 中每个 <option> 的显示文本（而非非法嵌套的 <span>），结合汇率 API 实现价格实时换算与动态渲染。
本文详解如何正确遍历并修改 `
HTML 中的 <option> 元素不支持嵌套任何 HTML 标签（如 <span>），这是 W3C 规范明确禁止的行为。浏览器会忽略 <option> 内部的子元素，导致 document.querySelectorAll('.price') 返回空 NodeList —— 这正是原代码中 console.log(element) 不触发、价格无法更新的根本原因。
✅ 正确做法：用纯文本 + 结构化 value 实现动态价格更新
我们应将价格数据与电影名称分离存储于 value 属性中（例如 "10 - Avengers: Endgame"），再通过 JavaScript 解析并重写 textContent：
<select id="movie"> <option value="">请选择电影</option> <option value="10 - Avengers: Endgame">Avengers: Endgame</option> <option value="12 - Joker">Joker</option> <option value="8 - Toy Story 4">Toy Story 4</option> <option value="9 - The Lion King">The Lion King</option> </select> <select id="currency"> <option value="USD">USD</option> <option value="EUR">EUR</option> <option value="JPY">JPY</option> </select> <span id="currencyTotal"></span>
? JavaScript 实现逻辑（含错误处理与初始化）
window.addEventListener('DOMContentLoaded', () => {
const currency = document.getElementById('currency');
const currencyTotal = document.getElementById('currencyTotal');
const movieSelect = document.getElementById('movie');
const options = movieSelect.querySelectorAll('option');
// 模拟汇率数据（实际项目中替换为真实 fetch）
const mockExchangeData = {
"conversion_rates": {
"USD": 1.00,
"EUR": 0.92,
"JPY": 151.23,
"GBP": 0.79,
"CAD": 1.36
}
};
const updateMoviePrices = () => {
const selectedCurrency = currency.value;
const rate = mockExchangeData.conversion_rates[selectedCurrency];
if (!rate) {
console.warn(`未找到货币 ${selectedCurrency} 的汇率`);
return;
}
currencyTotal.textContent = selectedCurrency;
// 遍历所有非空 option（跳过 placeholder）
options.forEach(option => {
if (!option.value || option.value.trim() === '') return;
const [basePrice, title] = option.value.split(' - ').map(s => s.trim());
const parsedPrice = parseFloat(basePrice);
if (isNaN(parsedPrice)) {
console.warn(`无效价格格式: ${option.value}`);
return;
}
const convertedPrice = (parsedPrice * rate).toFixed(2);
option.textContent = `${title} — ¥${convertedPrice} ${selectedCurrency}`;
});
};
// 绑定事件监听
movieSelect.addEventListener('change', updateMoviePrices);
currency.addEventListener('change', updateMoviePrices);
// 初始化渲染
updateMoviePrices();
});⚠️ 关键注意事项
- 禁止在 <option> 中使用 HTML 标签：<span class="price"> 在 <option> 内无效，DOM 查询永远失败。
- textContent 是唯一安全的更新方式：它会完全替换选项的可见文本，且兼容所有浏览器。
- value 属性用于数据存储，textContent 用于展示：二者职责分离，便于维护与扩展。
- 务必校验解析结果：使用 parseFloat() 后检查 isNaN()，避免因格式错误导致计算崩溃。
- API 错误需兜底处理：真实 fetch 场景中，应添加 .catch() 并提供默认汇率或用户提示。
✅ 总结
要动态更新下拉菜单中的价格，核心在于规避 DOM 结构违规，转而采用语义清晰、规范兼容的方案：利用 value 存储结构化数据，用 textContent 动态重写显示文本。配合合理的错误处理与初始化逻辑，即可实现稳定、可维护的价格多币种实时转换功能。
