时间戳

首页 > 解决方案 > 如何将文本更改为选择选项文本的末尾？

javascript - 如何将文本更改为选择选项文本的末尾？

问题描述

我想知道如何更改选择选项的部分文本。我有一个货币兑换计算器，根据选择的货币，我应该在电影名称的末尾动态更改货币的数量和名称。

我用过，但我不知道它是否是最好的选择。电影的标题必须始终保持不变

<div class="movie-container">
        <label>Pick a movie:</label>
        <select id="movie">
            <option value="10">Once Upon a Time <span class="replace">12 USD</span></option>
            <option value="12">Pulp Fiction <span class="replace">10 USD</span></option>
            <option value="8">Reservoir Dogs <span class="replace">9 USD</span></option>
            <option value="9">Django: Unchained <span class="replace">8USD</span></option>
        </select>
    </div>

当用户选择另一个下拉菜单时，例如欧元，代码应该如下所示：

<div class="movie-container">
            <label>Pick a movie:</label>
            <select id="movie">
                <option value="10,8">Once Upon a Time <span class="replace">10,8 EUR</span></option>
                <option value="8,9">Pulp Fiction <span class="replace">8,9 EUR</span></option>
                <option value="7,6">Reservoir Dogs <span class="replace">7,6 EUR</span></option>
                <option value="6,8">Django: Unchained <span class="replace">6,8 EUR</span></option>
            </select>
        </div>

有任何想法吗？我应该使用哪个选择器？您应该更改数字和货币代码。我正在使用 Fetch 和 exchangerate-api.com API

谢谢 ！！

标签： javascript

解决方案

假设 API 返回一些转换率字典，下面是一个可行的解决方案。请注意，根据当前的 HTML5 规范，如果option元素没有标签并且是元素的子元素，则该元素只能包含文本select。

let rates = {
    "USD": 1,
  "Euro": 0.86,
  "GBP": 0.74
}

let oldUnit = "USD";

document.getElementById("currencyPicker").onchange = function(e) {
    let newUnit = document.getElementById("currencyPicker").value;
  document.querySelectorAll(".movieOption").forEach((movie) => {
    let newValue = movie.value * rates[newUnit] / rates[oldUnit];
    let newText = `${movie.dataset.title} ${newValue.toFixed(2)} ${newUnit}`
    movie.textContent = newText;
    movie.value = newValue;
  });
  oldUnit = newUnit;
}
<div>
  <label>Pick a currency:</label>
  <select id="currencyPicker">
    <option value="USD">USD</option>
    <option value="Euro">Euro</option>
    <option value="GBP">GBP</option>
  </select>
</div>
<div class="movie-container">
  <label>Pick a movie:</label>
  <select id="movie">
    <option data-title="Once Upon a Time" class="movieOption" value="12">Once Upon a Time 12.00 USD</option>
    <option data-title="Pulp Fiction" class="movieOption" value="10">Pulp Fiction 10.00 USD</option>
    <option data-title="Reservoir Dogs" class="movieOption" value="9">Reservoir Dogs 9.00 USD</option>
    <option data-title="Django: Unchained" class="movieOption" value="8">Django: Unchained 8.00 USD</option>
  </select>
</div>

标题保存在data-title属性中，用于格式化textContent每个选项元素。新值显示为小数点后 2 位。

推荐阅读