jQuery根据selectbox选中值计算后填充文本框的实现咨询

1. 基础HTML结构参考 #

可直接参考如下结构编写对应表单元素，完全匹配需求：

<!-- 总重量输入框 -->
<div>
  <label>桶总重量(kg):</label>
  <input type="number" step="0.1" class="weight" placeholder="请输入总重量">
</div>
<!-- 桶尺寸下拉框 -->
<div>
  <label>桶尺寸:</label>
  <select id="sizeSelect">
    <option value="">请选择尺寸</option>
    <option value="2.5">Small</option>
    <option value="4.5">Medium</option>
    <option value="8.5">Large</option>
  </select>
</div>
<!-- 净重展示框 -->
<div>
  <label>化学品净重(kg):</label>
  <input type="text" class="updatedWeight" readonly>
</div>

2. jQuery计算逻辑代码 #

引入jQuery后直接使用如下代码即可，同时监听总重量输入和下拉框变更两个触发场景，避免只监听下拉导致修改总重量不更新的问题：

$(function() {
  // 封装计算净重的公共方法
  function calcNetWeight() {
    // 获取总重量，转数字，非法值默认设为0
    const totalWeight = parseFloat($('.weight').val()) || 0;
    // 获取选中的桶自重，转数字，未选择默认设为0
    const drumWeight = parseFloat($('#sizeSelect').val()) || 0;
    // 计算净重，保留1位小数，可根据需求调整精度
    const netWeight = (totalWeight - drumWeight).toFixed(1);
    // 填充到只读框，负数场景可以按需求改成提示或置为0
    $('.updatedWeight').val(netWeight >= 0 ? netWeight : 0);
  }

  // 下拉框变更时触发计算
  $('#sizeSelect').on('change', calcNetWeight);
  // 总重量输入时触发计算
  $('.weight').on('input', calcNetWeight);
})

3. 核心注意点 #

• 下拉框的option直接把对应桶自重存在value属性中，取值更方便不需要额外做映射
• 同时监听两个触发源，覆盖所有用户操作场景
• 输入值做类型转换和兜底处理，避免非数字输入导致的NaN报错
• 计算结果保留固定小数位，避免浮点数计算精度问题

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