HTML下拉框<option>传不同值：实现月/年费双位置填充求助

嘿，刚入门编程能自己折腾到单结果填充已经很棒啦！别慌，咱们只需要给下拉选项加一点额外数据，就能轻松实现同时填充两个位置的需求～

核心思路 #

每个房间数量选项其实需要同时携带月费和年费两个数据，HTML里可以用自定义的data-*属性来存储这些值，选中选项时直接读取这两个属性，再分别放到对应的显示区域就行。

完整代码示例 #

HTML部分 #

先把下拉框和显示月费、年费的元素写好：

<!-- 房间数量下拉框 -->
<select id="roomSelect" onchange="myFunction()">
  <option value="">请选择房间数量</option>
  <option value="1" data-month="150" data-year="1600">1间房</option>
  <option value="2" data-month="280" data-year="3000">2间房</option>
  <option value="3" data-month="400" data-year="4200">3间房</option>
</select>

<!-- 月费显示区域 -->
<div>月费：<span id="monthlyFee"></span> 元</div>
<!-- 年费显示区域 -->
<div>年费：<span id="yearlyFee"></span> 元</div>

JavaScript部分 #

修改你的myFunction，让它同时读取月费和年费数据：

function myFunction() {
  // 获取下拉框元素
  var selectElement = document.getElementById("roomSelect");
  // 获取当前选中的选项
  var selectedOption = selectElement.options[selectElement.selectedIndex];
  
  // 读取选中选项的月费和年费数据（两种写法任选其一）
  // 写法1：getAttribute
  var monthlyPrice = selectedOption.getAttribute("data-month");
  var yearlyPrice = selectedOption.getAttribute("data-year");
  
  // 写法2：dataset（更简洁，注意属性名转驼峰）
  // var monthlyPrice = selectedOption.dataset.month;
  // var yearlyPrice = selectedOption.dataset.year;
  
  // 填充到对应的显示区域，选回默认项时清空内容
  document.getElementById("monthlyFee").textContent = monthlyPrice || "";
  document.getElementById("yearlyFee").textContent = yearlyPrice || "";
}

关键细节解释 #

• data-month和data-year是HTML5的自定义数据属性，专门用来存储和元素相关的额外数据，不会影响页面显示，非常适合这种需要多值传递的场景。
• 两种读取自定义属性的方式都能用，dataset写法更简洁，但要注意属性名要从短横线式转成驼峰式（比如data-month对应dataset.month）。
• 最后的|| ""是为了防止用户选回默认选项时，显示区域不会出现null，而是自动清空，体验更友好。

小提示 #

• 记得把代码里的元素ID（比如roomSelect、monthlyFee）和你实际页面里的ID对应上哦！
• 如果后续需要从后端动态获取报价数据，只需要在生成选项时把对应的月费、年费值塞进data-*属性里就行，这个逻辑完全通用～

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