实现下拉选项选中后显示对应价格功能

嘿，我看你正在做房地产摄影服务的价格选择模块，想要用户选完住宅面积后自动展示对应价格对吧？其实这个需求实现起来超简单，给你一套直接能用的解决方案：

1. 核心逻辑梳理 #

我们只需要监听下拉框的选择变化事件，把选中选项的价格值，更新到页面上的价格展示区域就可以了，完全不需要复杂的操作。

2. 优化后的HTML（可选，语义更清晰） #

你的现有HTML结构已经没问题，我稍微调整了下价格展示部分的排版，让它更紧凑：

<div class="service-col">
 <h3>Real Estate Photography</h3>
 <select class="itemselect" id="itemselect">
 <option disabled hidden selected>Select Square Footage</option>
 <option value="$100">Under 1,499sqft</option>
 <option value="$125">1,500-1,999sqft</option>
 <option value="$150">2,000-2,499sqft</option>
 <option value="$175">2,500-2,999sqft</option>
 <option value="$200">3,000-3,499sqft</option>
 <option value="$240">3,500-3,999sqft</option>
 <option value="$290">4,000-4,499sqft</option>
 <option value="$340">4,500-4,999sqft</option>
 </select>
 <h4>Price: <span class="output"></span></h4>
</div>

3. 添加核心JavaScript代码 #

这部分是关键，直接复制到你的代码里就能用：

// 获取页面上的下拉框和价格显示元素
const sizeSelector = document.getElementById('itemselect');
const priceDisplay = document.querySelector('.output');

// 页面加载时可以给个默认提示（可选）
priceDisplay.textContent = 'Please select a square footage';

// 监听下拉框的选择变化事件
sizeSelector.addEventListener('change', function() {
  // 把选中选项的价格值赋值给价格显示区域
  priceDisplay.textContent = this.value;
});

4. 关于输入框的小建议 #

你之前考虑用输入框展示价格，但其实价格是只读的，用<span>这类静态元素更符合语义，也能避免用户误操作。如果确实想用输入框，只需要把<span class="output"></span>换成<input type="text" class="output" readonly>，然后把JS里的textContent改成value就行：

priceDisplay.value = this.value;

这样操作后，用户选择不同的面积选项，价格就会自动同步显示啦，亲测简单好用～

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