如何仅在两个下拉框选中指定值时触发change事件并渲染元素

// 定义标识位，控制元素仅渲染一次
let hasRenderedCompareBtn = false;
// 直接用多选择器替代链式add方法，绑定change事件
$('#target-id, #target-id-2, #target-id-3, #target-id-4').on('change', function() {
  // 已渲染过直接跳过执行
  if (hasRenderedCompareBtn) return;

  // 条件1：第一个下拉框选中目标值，可替换为你实际对应Target 1的value值
  const isTarget1Selected = $('#target-id').val() === 'Target 1';
  // 条件2：Target2/3/4对应下拉框中至少有一个选中非All值
  const isOtherTargetSelected = ['#target-id-2', '#target-id-3', '#target-id-4'].some(selector => {
    return $(selector).val() !== 'All';
  });

  // 两个条件同时满足才执行渲染逻辑
  if (isTarget1Selected && isOtherTargetSelected) {
    $("table thead th.nid").after('<th><button type="button" class="btn btn-sm btn-primary" id="compare">Compare</button></th>');
    $('table tbody tr td.compare').append(function(i) {
      return $('<input />', {
        type: 'checkbox',
        id: 'td' + i,
        class: 'form-check-input',
        value: name // 请提前定义此处用到的name变量，避免引用报错
      });
    });
    // 渲染完成后修改标识位，禁止重复渲染
    hasRenderedCompareBtn = true;
  }
});

优化说明 #

• 替代add方法：直接使用jQuery原生多选择器语法$('选择器1, 选择器2')即可同时选中多个目标元素，无需链式调用add方法，写法更简洁易读
• 判断逻辑修正：拆分两个核心判断条件，先校验第一个下拉框是否选中目标值，再通过数组some方法校验剩余三个下拉框是否至少有一个符合要求，两个条件通过&&做与判断，完全匹配你的业务规则
• 防重复渲染：新增布尔类型的标识位，初始值为false，首次渲染完成后置为true，每次触发change事件先校验标识位，已渲染则直接跳过，保证目标元素仅渲染一次

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