jQuery实现下拉框选项互斥时.click触发.val()返回null问题排查

你遇到的两个val()返回null的问题，本质是同一个原因：jQuery 3.0+版本中，select元素调用.val()时，如果当前选中的<option>是disabled状态，会直接返回null，而原生DOM的value属性没有这个限制，所以你用event.target.value能正常取值。
你的原逻辑里，选中某个值后会给所有下拉框的对应value的option加disabled属性，包括当前触发change的下拉框自己正在选中的那个option，就导致选中项本身处于禁用状态，触发了jQuery的这个规则。

调整禁用逻辑，只禁用其他下拉框的同值选项，不禁用当前下拉框自己的选中项即可，同时可以去掉多余的click事件监听，优化逻辑如下：

$('.select-cont select').change(function() {
  // 第一步：先清空所有option的disabled状态
  $('select option').attr('disabled', false);
  
  // 第二步：收集所有已选中的值
  const selectedVals = $('.select-cont select').map(function() {
    return $(this).val();
  }).get();
  
  // 第三步：遍历每个已选值，仅禁用其他下拉框的对应option
  selectedVals.forEach(val => {
    if (!val) return;
    $('.select-cont select').not(`:has(option[value="${val}"]:selected)`).find(`option[value="${val}"]`).attr('disabled', true);
  });
});

$('button').click(function() {
  // 现在可以正常拿到值
  console.log($('#first').val());
});

该逻辑会在每次修改下拉框选项时自动重新计算所有禁用状态，完全满足三个下拉框选项唯一的需求，同时不会禁用当前选中的option，所以.val()可以正常返回值，不需要额外记录上一次选中的值，逻辑更简洁稳定。

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