ASP.NET中将单选下拉框转换为带按钮的多选复选框下拉框

原生DropDownList不支持多选复选功能，我们可以通过ListBox控件结合操作按钮来实现需求，同时保留原有的数据源绑定逻辑。

修改后的完整代码 #

<asp:SqlDataSource ID="SqlDataSource3" runat="server" 
    ConnectionString="<%$ ConnectionStrings:ODWConnectionString_Live %>"
    SelectCommand="SELECT DISTINCT ISNULL(NULLIF(CZF_ODW, 'NA'), 'Other') AS CZF_ODW FROM dbo.WebAppTestView;">
</asp:SqlDataSource>

<td class="required" align="right" style="text-align: right;">
    <span class="catchment">Catchment Zone:</span>
</td>
<td>
    <!-- 多选ListBox，开启复选多选模式 -->
    <asp:ListBox ID="lbxCatchmentZones" runat="server" CssClass="textfield" 
        Width="182px" Height="120px" SelectionMode="Multiple"
        DataSourceID="SqlDataSource3" DataTextField="CZF_ODW" DataValueField="CZF_ODW" 
        AppendDataBoundItems="true" style="margin:9px;">
        <asp:ListItem Value="All" Text="All"></asp:ListItem>
    </asp:ListBox>

    <!-- 操作按钮组 -->
    <div style="margin-top:8px;">
        <asp:Button ID="btnSelectAll" runat="server" Text="全选" OnClick="btnSelectAll_Click" />
        <asp:Button ID="btnClearSelection" runat="server" Text="取消全选" OnClick="btnClearSelection_Click" />
        <asp:Button ID="btnConfirmSelection" runat="server" Text="确认选择" OnClick="btnConfirmSelection_Click" />
    </div>
</td>

后端事件处理代码（C#） #

在对应的.aspx.cs文件中添加按钮点击逻辑：

protected void btnSelectAll_Click(object sender, EventArgs e)
{
    // 选中所有选项
    foreach (ListItem item in lbxCatchmentZones.Items)
    {
        item.Selected = true;
    }
}

protected void btnClearSelection_Click(object sender, EventArgs e)
{
    // 取消所有选中项
    foreach (ListItem item in lbxCatchmentZones.Items)
    {
        item.Selected = false;
    }
}

protected void btnConfirmSelection_Click(object sender, EventArgs e)
{
    // 收集所有选中的值
    List<string> selectedZones = new List<string>();
    foreach (ListItem item in lbxCatchmentZones.Items)
    {
        if (item.Selected)
        {
            selectedZones.Add(item.Value);
        }
    }

    // 这里添加你的业务逻辑，比如数据筛选、选择结果保存等
    // 示例：处理"All"选项的特殊逻辑
    if (selectedZones.Contains("All"))
    {
        // 执行全选对应的业务操作
    }
}

可选样式优化 #

如果需要让控件视觉更贴近下拉框，可以添加自定义CSS：

.textfield {
    border:1px solid #ccc;
    border-radius:4px;
    padding:2px;
}
asp:Button {
    padding:2px 8px;
    margin-right:6px;
    cursor:pointer;
    border:1px solid #ccc;
    border-radius:3px;
}

补充说明 #

如果需要点击展开的下拉式多选复选框，可以通过前端JavaScript模拟下拉面板：用隐藏的div存放复选框列表，点击按钮切换显示/隐藏，后端通过Request.Form获取选中值。这种方式需要额外的前端逻辑，上面的方案是基于ASP.NET服务器控件的最简实现。

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