如何修改select下拉框option选项文本末尾的价格与货币单位

先纠正一个常见误区：<option> 标签内部不支持嵌套HTML元素（比如你写的span），浏览器渲染时会自动忽略span标签，所以原来的结构设计无法直接生效，建议调整实现逻辑。

• 第一步：固化电影基础数据，避免修改到电影名称
  优先把固定不变的电影名称、对应基准货币（USD）的价格提前存在JS数组或者option的自定义属性中，永远不从已渲染的文本中拆分电影名，从根源避免电影名被误改。
  示例自定义属性写法：

  <select id="movie">
    <option value="10" data-name="Once Upon a Time" data-base-usd="10">Once Upon a Time 12 USD</option>
    <option value="12" data-name="Pulp Fiction" data-base-usd="12">Pulp Fiction 10 USD</option>
    <option value="8" data-name="Reservoir Dogs" data-base-usd="8">Reservoir Dogs 9 USD</option>
    <option value="9" data-name="Django: Unchained" data-base-usd="9">Django: Unchained 8 USD</option>
  </select>
  

• 第二步：选择器使用
  直接用document.querySelectorAll('#movie option')即可选中所有下拉选项，遍历处理即可。
• 第三步：货币切换时的更新逻辑
  拿到汇率接口返回的目标货币汇率、货币代码后，遍历所有option：
  1. 读取option的data-base-usd属性拿到基准美元价格，乘以汇率得到目标货币价格
  2. 按需求格式化数值（如果需要用逗号作为小数分隔符，可直接替换小数点或者用Intl.NumberFormat指定对应地区规则）
  3. 拼接option的显示文本：${dataset.name} ${格式化后的金额} ${目标货币代码}
  4. 同步更新option的value属性为你需要的金额值

// 入参为你从exchangerate-api接口获取的目标货币对美元的汇率、目标货币代码
function updateMovieCurrency(exchangeRate, currencyCode) {
  const options = document.querySelectorAll('#movie option')
  options.forEach(option => {
    const baseUsd = Number(option.dataset.baseUsd)
    // 保留1位小数，可根据需求调整精度
    const targetPrice = (baseUsd * exchangeRate).toFixed(1)
    // 替换小数点为逗号，适配你需要的数值格式
    const formattedPrice = targetPrice.replace('.', ',')
    // 电影名从自定义属性读取，永远不会被修改
    option.textContent = `${option.dataset.name} ${formattedPrice} ${currencyCode}`
    // 同步更新option的value值
    option.value = formattedPrice
  })
}

内容的提问来源于stack exchange，提问作者A.Baes