如何用Vanilla JS实现<select>选项变更时同步更新DOM元素内容？

首先要明确：<option>的"值"可以是选项显示的文本、它的value属性，或是自定义的data-*属性（比如你的价格场景，推荐用自定义属性来分离显示文本和实际价格，更灵活）。

先准备基础的HTML结构：

<select id="planSelector">
  <option value="basic" data-price="39">基础套餐</option>
  <option value="pro" data-price="99">专业套餐</option>
  <option value="enterprise" data-price="199">企业套餐</option>
</select>
<!-- 要更新的价格显示元素 -->
<span id="priceDisplay">39</span>元

然后用JS获取选中的选项并更新DOM，三种常见场景的代码如下：

// 获取DOM元素
const planSelector = document.getElementById('planSelector');
const priceSpan = document.getElementById('priceDisplay');

// 获取当前选中的option
const selectedOption = planSelector.options[planSelector.selectedIndex];

// 场景1：更新为option的显示文本
// priceSpan.textContent = selectedOption.textContent;

// 场景2：更新为option的value属性值
// priceSpan.textContent = planSelector.value;

// 场景3（价格推荐）：更新为自定义data-price属性的值
priceSpan.textContent = selectedOption.dataset.price;

问题2：当变更时更新的最优方法是什么？ #

最优方案是**change事件监听+封装更新函数**，这也是生产环境中最常用的写法，优势在于：

• 事件驱动，只在选项真正变更时执行更新，避免无意义的性能消耗
• 函数封装便于复用、维护和扩展
• 初始化主动调用一次，确保页面加载时就显示正确的初始值

完整实现代码：

// 获取DOM元素
const planSelector = document.getElementById('planSelector');
const priceSpan = document.getElementById('priceDisplay');

// 封装更新价格的核心函数
function updatePriceDisplay() {
  const selectedOption = planSelector.options[planSelector.selectedIndex];
  // 从自定义data-price属性中获取价格并更新
  priceSpan.textContent = selectedOption.dataset.price;
}

// 页面加载完成后先执行一次，确保初始显示正确
updatePriceDisplay();

// 监听select的change事件，选项变更时自动触发更新
planSelector.addEventListener('change', updatePriceDisplay);

额外小贴士 #

• 如果你的价格和<option>的value属性完全一致，也可以直接用planSelector.value替代selectedOption.dataset.price，但data-*属性支持更复杂的数值类型（比如带小数的价格、带单位的字符串），适配性更强
• 可以给更新函数加边界判断，比如处理无选中选项的情况，让代码更健壮

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