本文介绍如何通过监听品牌和车型下拉菜单的变更事件，动态更新表格中“清洗”和“抛光”服务对应的价格，使用结构化数据与事件驱动逻辑实现精准响应。

本文介绍如何通过监听品牌和车型下拉菜单的变更事件，动态更新表格中“清洗”和“抛光”服务对应的价格，使用结构化数据与事件驱动逻辑实现精准响应。

在 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><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill9263" title="Html2md"><img
														src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="overflowclass">Html2md</a>
													<p class="overflowclass">使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>

Choice	Service	Price $
	Washing	0
	Polishing	0

<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 或类封装，便于维护。

通过该方案，你不仅实现了功能需求，还构建了高内聚、低耦合的前端交互逻辑——为后续增加车型、服务或价格策略预留了良好扩展基础。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！