选择select下拉选项时如何修改段落内容？应使用什么事件？

需绑定的事件 #

给<select>下拉框绑定**change事件**即可，该事件会在用户完成选项切换、下拉选择结果确认后触发，完全匹配下拉选择的交互场景。不要使用click事件——点击下拉展开选项面板时也会触发click，会导致逻辑误执行。

具体实现逻辑 #

• 先获取两个核心DOM节点：价格展示的<p class="price">元素、下拉选择框<select>元素。
• 提前维护计费周期和对应价格的映射表，推荐给每个<option>添加独立的value属性作为计费周期标识，不要直接拿选项显示文本做匹配，避免后续修改选项文案导致逻辑失效。
• 在change事件的回调函数中，读取当前选中选项的value值，从映射表中取出对应价格，替换价格展示元素的文本内容即可。
• 可选优化：页面加载完成后主动触发一次select的change事件，保证初始渲染的价格和下拉框默认选中的选项一致，避免静态写死的价格和默认选项不匹配的问题。

实现代码示例 #

如果基于现有HTML做最小改动，直接用选中项文本做匹配的写法如下：

// 获取DOM节点
const priceNode = document.querySelector('.price');
const selectNode = document.querySelector('select[name="price"]');

// 价格映射表，可根据实际业务定价调整
const priceConfig = {
  'Monthly': '$14',
  '6 Months': '$78',
  'Yearly': '$132'
};

// 绑定change事件
selectNode.addEventListener('change', function() {
  // 获取当前选中的选项文本
  const selectedOption = this.options[this.selectedIndex].textContent;
  // 更新价格展示
  priceNode.textContent = priceConfig[selectedOption];
});

更稳妥的写法是给option加value属性，和显示文案解耦，调整后的代码如下：

<p class="price">$14</p>
<select name="price">
  <option value="monthly" selected>Monthly</option>
  <option value="halfYear">6 Months</option>
  <option value="yearly">Yearly</option>
</select>

const priceNode = document.querySelector('.price');
const selectNode = document.querySelector('select[name="price"]');

const priceConfig = {
  monthly: '$14',
  halfYear: '$78',
  yearly: '$132'
};

selectNode.addEventListener('change', function() {
  priceNode.textContent = priceConfig[this.value];
});

// 初始化时触发一次，保证默认状态价格和选项匹配
selectNode.dispatchEvent(new Event('change'));

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