通过两个<select>控件实时更新<input>数值的问题排查

需求：统计两个<select>控件中选中值为0的数量，实时显示在<input>输入框中——两个都选中0时显示2，仅一个选中0时显示1，输入框需随选项变更实时更新。
问题：当前实现中，切换任意一个<select>的选项两次后，<input>的数值会错误地变为0。

现有代码 #

JavaScript 代码 #

$(document).ready(function() {
  var count = 0;
  
  $('#s1').change(function() {
    var f1 = $(this).val();
    
    if (f1 == 0 && f1 != '') {
      ++count;
    } else {
      if (count > 0) {
        --count;
      }
    }
    
    $('#total').val(count);
  });
  
  $('#s2').change(function() {
    var f1 = $(this).val();
    
    if (f1 == 0 && f1 != '') {
      ++count;
    } else {
      if (count > 0) {
        --count;
      }
    }
    
    $('#total').val(count);
  });
});

HTML 代码 #

<select id="s1">
  <option>Select</option>
  <option value="0">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>
<select id="s2">
  <option>Select</option>
  <option value="0">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
</select>
<input type="text" id="total" value="0">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>

问题根源 #

现有代码用全局变量count做增量/减量统计，但未跟踪每个下拉框的历史选中状态，导致逻辑错误：

• 当一个下拉框从「非0选项」切换到「另一个非0选项」时，代码会错误执行count--（只要当前count>0），直接导致统计值偏低。
• 例如：当s2选中0（count=1），切换s1从1到2时，代码判定当前值非0，执行count--，最终count=0，但实际正确统计值应为1。

解决方案 #

放弃增量统计思路，每次触发change事件时重新遍历所有目标下拉框，统计选中值为0的数量，确保结果始终准确：

$(document).ready(function() {
  // 定义统一的统计函数
  function updateZeroCount() {
    // 筛选所有选中值为0的下拉框，统计数量
    var count = $('select[id^="s"]').filter(function() {
      return $(this).val() === '0';
    }).length;
    $('#total').val(count);
  }
  
  // 给两个下拉框绑定change事件
  $('#s1, #s2').on('change', updateZeroCount);
  
  // 页面加载时初始化统计（确保初始状态正确）
  updateZeroCount();
});

代码说明 #

1. 统一统计逻辑：用filter方法直接筛选值为0的下拉框，取其长度作为统计结果，避免状态跟踪错误。
2. 事件绑定优化：一次性给两个下拉框绑定事件，减少冗余代码。
3. 初始化统计：页面加载时执行一次统计，确保默认状态下输入框显示正确的0。

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