如何实现选择Select许可证选项时动态修改Price价格文本？

你可以通过原生JavaScript监听下拉框的change事件，结合价格映射表来实现自动更新价格的功能，具体步骤如下：

1. 定义许可证-价格映射表 #

先把每个许可证对应的价格整理成一个对象，后续维护起来更方便：

const priceMap = {
  "Select Licence": "$20",
  "MP3": "$20",
  "Tagged Wav": "$35",
  "Un-Tagged Wav": "$50",
  "Stems": "$100",
  "Exlusive": "$500" // 保留原HTML中的拼写
};

2. 监听下拉框变化并更新价格 #

通过获取DOM元素，监听下拉框的change事件，每次选中选项后从映射表中匹配价格，更新到页面：

// 获取DOM元素
const selectElement = document.getElementById('select');
const priceElement = document.getElementById('price');

// 监听change事件
selectElement.addEventListener('change', function() {
  // 获取当前选中的选项文本
  const selectedLicence = this.options[this.selectedIndex].text;
  // 从映射表中获取对应价格，找不到就用默认值
  const newPrice = priceMap[selectedLicence] || "$20";
  // 更新价格显示
  priceElement.textContent = newPrice;
});

完整代码示例 #

把上述代码整合到你的HTML中，最终代码如下：

<div class="single-pro-details"> <!--Fix in css-->
    <h6>Home / Beats</h6>
    <h4>Lil Tecca Type Beat - New Love</h4>
    <h2 id="price">$20</h2>
    <select id="select">
        <option>Select Licence</option>
        <option>MP3</option>
        <option>Tagged Wav</option>
        <option>Un-Tagged Wav</option>
        <option>Stems</option>
        <option>Exlusive</option>
    </select>
</div>

<script>
const priceMap = {
  "Select Licence": "$20",
  "MP3": "$20",
  "Tagged Wav": "$35",
  "Un-Tagged Wav": "$50",
  "Stems": "$100",
  "Exlusive": "$500"
};

const selectElement = document.getElementById('select');
const priceElement = document.getElementById('price');

selectElement.addEventListener('change', function() {
  const selectedLicence = this.options[this.selectedIndex].text;
  const newPrice = priceMap[selectedLicence] || "$20";
  priceElement.textContent = newPrice;
});
</script>

额外说明 #

• 你可以根据实际需求修改priceMap里的价格数值
• 如果需要更严谨的逻辑，可给每个<option>添加value属性，把映射表的键改成对应value值，避免因文本修改导致逻辑失效
• 代码用原生JavaScript实现，无需依赖任何框架，兼容性好

内容的提问来源于stack exchange，提问作者Deni Beatz