jQuery选择框联动问题：如何保持目标元素不随选项切换消失

当前代码的逻辑是只要任意一个下拉框的值为0，就隐藏#product-addons-total元素。这会导致：即便你已经选好所有选项让元素显示，只要切换某个下拉框时（比如临时选中默认的0选项，或事件触发时机导致某个下拉值被误判），元素就会隐藏，必须重新选择所有选项才能再次显示。

根据你的需求，提供两种针对性修改方案：

方案一：一旦完成所有选择，永久显示元素 #

如果你的需求是用户选完所有非0选项后，不管后续如何切换下拉框，都保持元素显示，可以增加一个标记变量记录状态：

// 标记是否已满足过显示条件
let hasShownTotal = false;

// 给所有相关下拉框绑定change事件
$('.wc-pao-addon-distribuicao select, .wc-pao-addon-tamanho-da-empresa select, select#formato').on('change', function() {
  const distVal = $('.wc-pao-addon-distribuicao select').val();
  const sizeVal = $('.wc-pao-addon-tamanho-da-empresa select').val();
  const formatVal = $('select#formato').val();
  
  const shouldShow = distVal != 0 && sizeVal != 0 && formatVal != 0;
  
  if (shouldShow) {
    hasShownTotal = true;
    $("#product-addons-total").show();
  } else if (!hasShownTotal) {
    // 仅从未显示过的情况下才隐藏
    $("#product-addons-total").hide();
  }
});

方案二：实时根据下拉状态显示/隐藏（修复误隐藏问题） #

如果你的需求是实时判断当前所有下拉框状态，只要都选非0值就显示，否则隐藏，问题可能出在事件绑定不完整或值判断的类型问题，优化代码如下：

// 绑定所有相关下拉框的change事件
$('.wc-pao-addon-distribuicao select, .wc-pao-addon-tamanho-da-empresa select, select#formato').on('change', checkTotalDisplay);

// 页面加载时初始化状态
$(document).ready(checkTotalDisplay);

// 抽离判断逻辑为独立函数
function checkTotalDisplay() {
  // 统一转为字符串避免类型匹配问题
  const distVal = $('.wc-pao-addon-distribuicao select').val() + '';
  const sizeVal = $('.wc-pao-addon-tamanho-da-empresa select').val() + '';
  const formatVal = $('select#formato').val() + '';
  
  if (distVal === '0' || sizeVal === '0' || formatVal === '0') {
    $("#product-addons-total").hide();
  } else {
    $("#product-addons-total").show();
  }
}

优化点说明 #

• 给所有涉及的下拉框都绑定change事件，确保切换任意下拉都会触发判断
• 页面加载时主动执行一次判断，避免初始状态异常
• 将值转为字符串后对比，避免数字与字符串的类型匹配问题

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