如何动态更新 select 选项中的价格文本-js教程-PHP中文网

本文详解如何正确遍历并修改中每个的显示文本（而非非法嵌套的），结合汇率 API 实现价格实时换算与动态渲染。

本文详解如何正确遍历并修改 `

HTML 中的

✅ 正确做法：用纯文本 + 结构化 value 实现动态价格更新

我们应将价格数据与电影名称分离存储于 value 属性中（例如 "10 - Avengers: Endgame"），再通过 JavaScript 解析并重写 textContent：

coding-agent

一款AI开发辅助工具，主要用于通过后台进程将编码任务委托给 Codex、Claude Code 或 Pi 智能体。适用场景：（1）构建或创建新功能/应用，（2）审查 PR，适合需要提升相关任务效率的用户。

下载

<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();
});