如何使用JavaScript获取HTML option的data属性并解析为整数

问题解决方案 #

现有代码的错误点 #

• HTML中data-*属性语法错误：你使用了冒号data-fat:"13"，正确语法应为等号data-fat="13"，同时Midnight选项的data-fat属性存在引号转义错误
• 取值逻辑错误：data-fat属性绑定在<option>元素上，你当前直接从<select>元素取data值，永远拿不到正确的脂肪数值
• 事件绑定错误：你把#calculate的点击事件嵌套在#base的change事件里，每次切换下拉选项都会重复绑定点击事件，后续点击会重复执行多次逻辑
• 缺少整数转换步骤：val()和data()接口默认返回字符串类型，需要手动转成整数

修正后的完整代码 #

<body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {
  // 把点击事件提到外层，避免重复绑定
  $("#calculate").click(function(){
    // 点击计算时实时获取选中的option
    const selectedOption = $("#base option:selected");
    // 转成十进制整数，加空值兜底
    const calories = parseInt(selectedOption.val() || 0, 10);
    const fat = parseInt(selectedOption.data('fat') || 0, 10);
    // 赋值到页面
    $('#FinalFat').text(fat);
    $('#FinalCal').text(calories);
  });
});
</script>
    
<form id="customizations">
<label for="base">Base:</label>
<select name="base" id="base">
  <option value="0" data-fat="0"> --- </option>
  <option value="5" data-fat="13">Original</option>
  <option value="4" data-fat="10">Cold Brew</option>
  <option value="2" data-fat="23">Sunrise</option>
  <option value="12" data-fat="3">Midnight</option>
  <option value="4" data-fat="13">Decaf</option>
</select>
</form>

<div class="column">
<button id="calculate"> Calculate Nutrition </button>
      
<p>Fat:<label id="FinalFat" style="color:green"></label></p>
<p>Calories:<label id="FinalCal" style="color:red"></label></p>
      
</div>
</body>

核心修改说明 #

• 统一修正了所有data-fat属性的语法错误，确保属性可以被正常读取
• 调整事件绑定逻辑，把计算点击事件放到全局，避免重复绑定
• 点击计算时实时读取选中option的数值，不会出现切换选项后数值缓存的问题
• 使用parseInt(数值, 10)统一转成十进制整数，符合你要的整数类型要求
• 给默认空选项加了0值兜底，避免没选选项时显示NaN

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