本文介绍如何使用 HTML、jQuery 实现三个独立下拉菜单的价格联动计算，自动提取各选项的 data-price 值（如 $70），去除货币符号后转为数字相加，并实时显示在总金额输入框中。

本文介绍如何使用 html、jquery 实现三个独立下拉菜单的价格联动计算，自动提取各选项的 `data-price` 值（如 `$70`），去除货币符号后转为数字相加，并实时显示在总金额输入框中。

在网球报名表等多选服务类表单中，用户常需从多个可选赛事中自由组合报名（例如主选 + 备选1 + 备选2），每项对应不同费用。为提升用户体验与数据准确性，需实现「任一选择变更，总价立即更新」的交互逻辑。以下为完整、健壮、可直接复用的解决方案。

✅ 正确的 HTML 结构优化建议

首先，原始代码中存在多个问题需修正：

• 不应嵌套
  标签（每个 不应包裹在独立 内）；
• 标签不能写在 内部（HTML 无效嵌套）；
• 所有 应共用统一的 data-price 属性名（如统一用 data-price），避免 data-price1/data-price2 等冗余命名，便于 jQuery 统一读取。

修正后的精简 HTML 片段如下：

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

Select Pennants Competition (Primary): Drop the Menus to select Saturday 4p Team Mens Saturday 4p Team Womens Monday Night Fast4 3p Team

Select Pennants Competition (Optional #1): Optional, If you want to play another comp Saturday 4p Team Mens Monday Night Fast4 3p Team

Select Pennants Competition (Optional #2): Optional, If you want to play another comp Saturday 4p Team Mens Wednesday Night 8s Doubles Mens

Total Price:

✅ 关键改进点：

• 所有 使用统一 data-price="数值"（纯数字，无 $ 符号），语义清晰且便于 JS 解析；
• 移至 外部，作为独立表单控件；
• readonly 属性保障总价仅由逻辑控制，避免用户误输。

✅ jQuery 实时计算总价（推荐方案）

将以下脚本置于

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