如何在文本框和select选择框值均满足条件时切换div的显示/隐藏状态

你现有代码的问题是两个事件的判断逻辑只校验了当前触发事件的控件取值，没有同步校验另一个控件的状态，所以只要任意一个控件有值就会触发div显示。

解决方法是把两个字段的校验逻辑抽成公共函数，两个控件的事件触发时都调用这个函数做统一判断即可，同时建议用input事件替代keyup，覆盖右键粘贴、自动填充等场景的取值变化。

优化后的完整代码 #

$(document).ready(function() {
  // 抽离统一的显示/隐藏判断逻辑
  function updateShowOption() {
    const age = $('#age').val().trim(); //  trim处理空格，避免输入空白字符误判
    const gender = $('#gender').val();
    // 两个值都非空才显示，jQuery的toggle方法可直接传入布尔值控制显隐
    $('#showOption').toggle(age && gender);
  }

  // 两个控件的事件都绑定同一个判断函数
  $('#age').on('input', updateShowOption);
  $('#gender').on('change', updateShowOption);
});

原有HTML代码无需修改即可直接运行。

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