如何实现选中主下拉菜单选项后联动展示对应子下拉菜单的功能

1. 新增默认隐藏样式 #

首先统一给所有子下拉菜单设置默认隐藏，避免页面加载时闪现，在你的样式文件中添加以下代码：

/* 仅隐藏子下拉容器，保留主菜单显示 */
#list1, #list2, #list3, #list4 {
  display: none;
}

如果不想改CSS，也可以直接给这四个div标签加上style="display: none"属性，效果一致。

2. 编写联动逻辑JS代码 #

你HTML中主菜单已经绑定了onchange="show()"事件，直接添加对应的JS函数即可：

function show() {
  // 获取主选项的选中状态
  const monthSelected = document.querySelector('#month').checked;
  const quarterSelected = document.querySelector('#quarter').checked;
  const yearSelected = document.querySelector('#year').checked;

  // 匹配显示对应子菜单
  document.getElementById('list1').style.display = monthSelected ? 'block' : 'none';
  document.getElementById('list3').style.display = monthSelected ? 'block' : 'none';
  document.getElementById('list2').style.display = quarterSelected ? 'block' : 'none';
  document.getElementById('list4').style.display = yearSelected ? 'block' : 'none';

  // 可选：取消主选项时自动清空对应子菜单的选中状态
  if (!monthSelected) {
    document.querySelectorAll('#list1 input, #list3 input').forEach(el => el.checked = false);
  }
  if (!quarterSelected) {
    document.querySelectorAll('#list2 input').forEach(el => el.checked = false);
  }
  if (!yearSelected) {
    document.querySelectorAll('#list4 input').forEach(el => el.checked = false);
  }
}

补充说明 #

如果你的.dropdown-check-list类本身使用了非block的display属性（比如inline-block、flex），把JS中赋值的block替换为对应的属性值即可，不影响联动逻辑。

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