如何用jQuery实现选中select下拉residential选项时显示对应区块

现有代码核心问题 #

1. 事件绑定对象错误：change事件需要绑定在<select>元素（id为building）上，<option>子元素本身不会触发change事件。
2. 选中判断方法误用：isChecked()仅适用于单选框、复选框的状态判断，下拉框需要读取select的当前选中值做匹配。
3. 逻辑结构缺失：($(this).isChecked())行无判断分支，即使方法正确也无法实现条件控制，后续的显示隐藏逻辑是无条件执行的。
4. 执行时机错误：事件触发代码放在window.onload外部，可能出现DOM未加载完成就执行的情况，导致逻辑失效。

基础实现代码 #

建议先通过CSS默认隐藏所有选项区块，避免页面加载时出现短暂闪烁：

.residential-options, .commercial-options, .corporate-options, .hybrid-options {
  display: none;
}

对应的jQuery逻辑：

$(function() {
  // 绑定select的change事件
  $('#building').on('change', function() {
    // 获取当前选中项的value
    const selectedVal = $(this).val();
    // 先隐藏所有类型的选项区块
    $('.residential-options, .commercial-options, .corporate-options, .hybrid-options').hide();
    // 选中residential时显示对应区块
    if (selectedVal === 'residential') {
      $('.residential-options').show();
    }
    // 其他选项可按相同规则扩展，例如：
    // else if (selectedVal === 'commercial') {
    //   $('.commercial-options').show();
    // }
  });
  // 页面加载完成后主动触发一次change，同步初始状态
  $('#building').trigger('change');
});

简化优化方案 #

如果所有选项对应的区块class都遵循[选中值]-options的命名规则，可以进一步简化代码，无需逐个写条件判断：

$(function() {
  // 提前缓存所有选项区块DOM
  const allOptionBlocks = $('.residential-options, .commercial-options, .corporate-options, .hybrid-options');
  $('#building').on('change', function() {
    const selectedVal = $(this).val();
    allOptionBlocks.hide();
    // 有选中值时显示对应区块
    selectedVal && $(`.${selectedVal}-options`).show();
  }).trigger('change');
});

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