.NET Razor中复刻FileMaker全展开多选复选框下拉功能求助

嘿，我来给你支支招！我之前也帮同行处理过类似从低代码工具转.NET Razor的UI复刻需求，你说的这三个FileMaker里的下拉框特性，其实用Razor结合CSS、原生JS就能搞定，完全不用依赖外部插件👇

先拆解你的三个核心需求，逐个实现： #

• 全展开无滚动、支持多列的选项列表
  原生<select>的样式和布局限制太多，咱们直接用<div>模拟下拉面板，靠CSS的column-count属性自动拆分多列，所有选项直接铺开，不用滚动条。列数可以根据选项数量灵活调整，比如选项多就设3列，少就设2列。

• 带复选框的可多选选项
  每个选项用<label>包裹复选框和文本，点击文本也能选中，体验和FileMaker一致。在Razor里用foreach循环遍历你的业务数据源就行，同时给每个复选框绑定change事件，把选中的值存到隐藏输入框，方便提交表单时传给后端。

• 选项框保持展开（我猜你是想说默认展开或者点击后保持直到主动关闭？）
  如果要默认展开，直接把面板的display设为block；如果是点击触发后保持展开，去掉点击外部关闭的JS逻辑就行，非常灵活。

给你贴个可直接用的Razor代码示例： #

@{
    // 这里模拟选项数据源，实际替换成你的业务数据
    var options = new List<string> {
        "客户A", "客户B", "客户C", "客户D",
        "项目1", "项目2", "项目3", "项目4",
        "状态1", "状态2", "状态3"
    };
    // 动态计算列数：每列最多4个选项
    var columnCount = (int)Math.Ceiling(options.Count / 4.0);
}

<!-- 如果你不需要触发按钮，直接默认展开，就删掉这个按钮 -->
<button id="togglePanel" class="btn btn-secondary">打开选项列表</button>

<!-- 模拟下拉的选项面板 -->
<div id="optionPanel" class="option-panel" style="column-count: @columnCount;">
    @foreach (var option in options)
    {
        <label class="option-item">
            <input type="checkbox" name="selectedItems" value="@option" />
            @option
        </label>
    }
</div>

<!-- 隐藏输入框：收集选中的值，提交表单时传给后端 -->
<input type="hidden" id="selectedValues" name="selectedValues" />

<style>
    .option-panel {
        display: none; /* 默认隐藏，要默认展开就改成block */
        width: 500px;
        column-gap: 25px;
        padding: 12px;
        border: 1px solid #ddd;
        background-color: #fff;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        margin-top: 6px;
    }

    .option-item {
        display: block;
        margin-bottom: 10px;
        cursor: pointer;
        font-size: 14px;
    }

    .option-item input {
        margin-right: 6px;
    }
</style>

<script>
    const toggleBtn = document.getElementById('togglePanel');
    const optionPanel = document.getElementById('optionPanel');
    const checkboxes = document.querySelectorAll('input[name="selectedItems"]');
    const selectedValuesInput = document.getElementById('selectedValues');

    // 点击按钮切换面板显示/隐藏
    toggleBtn?.addEventListener('click', (e) => {
        e.stopPropagation();
        optionPanel.style.display = optionPanel.style.display === 'block' ? 'none' : 'block';
    });

    // 点击面板外部关闭（不需要保持展开就保留这段，要一直展开就删掉）
    document.addEventListener('click', (e) => {
        if (!optionPanel.contains(e.target) && e.target !== toggleBtn) {
            optionPanel.style.display = 'none';
        }
    });

    // 实时收集选中的值到隐藏输入框
    checkboxes.forEach(checkbox => {
        checkbox.addEventListener('change', () => {
            const selected = Array.from(checkboxes)
                .filter(cb => cb.checked)
                .map(cb => cb.value);
            selectedValuesInput.value = JSON.stringify(selected);
        });
    });

    // 如需默认展开，取消注释下面这句
    // optionPanel.style.display = 'block';
</script>

几个小提示： #

1. 样式可以完全匹配你们系统的UI风格，比如调整颜色、间距、边框样式，和FileMaker的界面对齐。
2. 后端接收数据时，把隐藏输入框的JSON字符串反序列化成列表就行，比如用JsonSerializer.Deserialize<List<string>>(Request.Form["selectedValues"])。
3. 列数也可以做成动态的，比如根据选项总数自动计算，示例里已经写了简单的计算逻辑，你可以按需调整。

内容来源于stack exchange