本文介绍如何通过监听品牌和车型下拉菜单的变更事件，动态更新表格中“清洗”和“抛光”服务对应的价格，使用结构化数据与事件驱动逻辑实现精准响应。
本文介绍如何通过监听品牌和车型下拉菜单的变更事件，动态更新表格中“清洗”和“抛光”服务对应的价格，使用结构化数据与事件驱动逻辑实现精准响应。
在 Web 表单中，常需根据用户选择实时更新关联数据（如不同车型对应不同服务价格）。本教程提供一种清晰、可维护的实现方式：分离数据定义与 DOM 操作逻辑，通过两级联动（品牌 → 车型 → 价格）实现响应式更新。
核心思路
- 第一级联动：#brandselect 变更时，重置并填充 #carselect 的可选车型；
- 第二级联动：#carselect 变更时，依据所选车型从预定义价格对象中查找对应服务价格；
- 使用默认回退机制（||）确保未配置车型自动显示 $0，提升健壮性。
完整可运行代码示例
<p>Factory <br>
<select id="brandselect">
<option value="Toyota">Toyota</option>
<option value="Nissan">Nissan</option>
<option value="Volkswagen">Volkswagen</option>
</select>
</p>
<p>Model <br>
<select id="carselect"></select>
</p>
<table>
<tr>
<th>Choice</th>
<th>Service</th>
<th>Price $</th>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Washing</td>
<td><p id="washing">0</p></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Polishing</td>
<td><p id="polishing">0</p></td>
</tr>
</table>
<script>
const options = {
'Toyota': { cars: ['Camry', 'Corolla', 'Yaris Sedan'] },
'Nissan': { cars: ['bluebird', 'Murano', 'Tiida'] },
'Volkswagen': { cars: ['MarkX', 'Avensis'] }
};
// 价格映射表：按车型精确配置服务价格
const prices = {
"Camry": { washing: 20, polishing: 20 },
"Corolla": { washing: 30, polishing: 30 }
// 其他车型将使用默认值 { washing: 0, polishing: 0 }
};
const brandselect = document.getElementById('brandselect');
const carselect = document.getElementById('carselect');
function updateCarByBrand() {
carselect.innerHTML = '';
const cars = options[brandselect.value]?.cars || [];
cars.forEach(car => {
const option = document.createElement('option');
option.value = car;
option.textContent = car;
carselect.appendChild(option);
});
}
function updatePriceByModel() {
const selectedCar = carselect.value;
const price = prices[selectedCar] || { washing: 0, polishing: 0 };
document.getElementById('washing').textContent = price.washing;
document.getElementById('polishing').textContent = price.polishing;
}
// 绑定事件并初始化
brandselect.addEventListener('change', updateCarByBrand);
carselect.addEventListener('change', updatePriceByModel);
// 初始渲染
updateCarByBrand();
updatePriceByModel();
</script>关键注意事项
- ✅ 避免内联 HTML 拼接：示例中改用 document.createElement + appendChild 替代 innerHTML += ...，防止 XSS 风险与 DOM 重排开销；
- ✅ 空值防护：使用可选链 options[...]?.cars 和空值合并 || 确保数据缺失时不报错；
- ✅ 语义化更新：使用 textContent（而非 innerHTML）设置纯文本价格，更安全高效；
- ⚠️ 若需支持多服务或动态扩展（如新增“打蜡”），建议将价格结构升级为二维 Map 或类封装，便于维护。
通过该方案，你不仅实现了功能需求，还构建了高内聚、低耦合的前端交互逻辑——为后续增加车型、服务或价格策略预留了良好扩展基础。
