ASP.NET中如何创建包含复选框的下拉列表？

1. 自定义下拉复选框组件（原生HTML/CSS/JS） #

核心是手动控制下拉面板的显示/隐藏，重点阻止复选框点击事件冒泡，避免触发面板关闭逻辑。

实现步骤： #

• 用容器包裹触发按钮和下拉面板，面板默认隐藏
• 面板内放置带复选框的星期选项
• 通过事件监听控制面板的显示切换，同时给复选框添加事件阻止冒泡
• 可选添加确认按钮，点击后关闭面板并获取选中值

代码示例： #

<div class="dropdown-container">
  <button class="dropdown-trigger">选择星期</button>
  <div class="dropdown-panel" id="weekPanel">
    <label><input type="checkbox" name="week" value="1"> 周一</label>
    <label><input type="checkbox" name="week" value="2"> 周二</label>
    <label><input type="checkbox" name="week" value="3"> 周三</label>
    <label><input type="checkbox" name="week" value="4"> 周四</label>
    <label><input type="checkbox" name="week" value="5"> 周五</label>
    <label><input type="checkbox" name="week" value="6"> 周六</label>
    <label><input type="checkbox" name="week" value="7"> 周日</label>
    <button class="confirm-btn">确认选择</button>
  </div>
</div>

<style>
.dropdown-container {
  position: relative;
  display: inline-block;
}
.dropdown-trigger {
  padding: 8px 16px;
  cursor: pointer;
}
.dropdown-panel {
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  border: 1px solid #ddd;
  padding: 12px;
  display: none;
  flex-direction: column;
  gap: 8px;
}
.dropdown-panel.show {
  display: flex;
}
.confirm-btn {
  margin-top: 8px;
  padding: 4px 8px;
  align-self: flex-end;
}
</style>

<script>
const trigger = document.querySelector('.dropdown-trigger');
const panel = document.getElementById('weekPanel');
const checkboxes = panel.querySelectorAll('input[type="checkbox"]');
const confirmBtn = panel.querySelector('.confirm-btn');

// 点击触发按钮切换面板显示
trigger.addEventListener('click', () => {
  panel.classList.toggle('show');
});

// 阻止复选框点击事件冒泡，避免触发面板关闭
checkboxes.forEach(checkbox => {
  checkbox.addEventListener('click', (e) => {
    e.stopPropagation();
  });
});

// 确认选择并关闭面板
confirmBtn.addEventListener('click', () => {
  const selectedWeeks = Array.from(checkboxes)
    .filter(cb => cb.checked)
    .map(cb => cb.nextSibling.textContent.trim());
  console.log('选中的星期:', selectedWeeks);
  panel.classList.remove('show');
});

// 点击面板外部关闭面板
document.addEventListener('click', (e) => {
  if (!panel.contains(e.target) && e.target !== trigger) {
    panel.classList.remove('show');
  }
});
</script>

2. 修复现有按钮+面板方案的问题 #

你之前遇到的「选中复选框后面板消失」，本质是点击复选框时事件冒泡到上层元素，触发了面板关闭逻辑。只需要给复选框（或其所在的label）添加事件阻止冒泡即可：

// 假设你的复选框有.panel-checkbox类
document.querySelectorAll('.panel-checkbox').forEach(cb => {
  cb.addEventListener('click', (e) => {
    e.stopPropagation();
  });
});

3. 框架项目快速实现（以Vue为例） #

如果用前端框架开发，直接通过状态管理控制面板显示，同时利用框架的事件修饰符阻止冒泡：

<template>
  <div class="dropdown">
    <button @click="showPanel = !showPanel">选择星期</button>
    <div class="panel" v-show="showPanel" @click.stop>
      <label v-for="week in weeks" :key="week.value">
        <input type="checkbox" v-model="selectedWeeks" :value="week.value">
        {{ week.name }}
      </label>
      <button @click="confirm">确认</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const showPanel = ref(false);
const weeks = ref([
  { name: '周一', value: 1 },
  { name: '周二', value: 2 },
  { name: '周三', value: 3 },
  { name: '周四', value: 4 },
  { name: '周五', value: 5 },
  { name: '周六', value: 6 },
  { name: '周日', value: 7 },
]);
const selectedWeeks = ref([]);

const confirm = () => {
  console.log('选中的星期:', selectedWeeks.value);
  showPanel.value = false;
};
</script>

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