ASPxDropDownEdit结合ASPxListBox实现下拉多选
在 ASP.NET WebForm 的 DevExpress 控件库中,ASPxComboBox 原生并不支持多选功能。若需要实现多选效果,官方推荐使用 ASPxDropDownEdit 结合 ASPxListBox 来模拟(即 CheckComboBox 方案)。下面分别说明这两种情况下的显示与设置方法。

方案一:ASPxComboBox(单选)
如果你的场景只需单选,直接使用 ASPxComboBox 即可。

显示选中项
控件会自动在编辑框中显示选中项的 Text 属性值。

设置选中项(服务器端)
可以通过以下任一方式设置:

csharp
// 按索引设置
cbxJobType.SelectedIndex = 1;

// 按 Value 设置
cbxJobType.Value = "Value #2";

// 按 Text 设置
cbxJobType.Text = "Text #2";

// 按 ListEditItem 对象设置
cbxJobType.SelectedItem = cbxJobType.Items.FindByValue("Value #2");
设置选中项(客户端)
javascript
comboBox.SetSelectedIndex(1);
comboBox.SetValue('Value #2');
comboBox.SetText('Text #2');
comboBox.SetSelectedItem(comboBox.FindItemByValue('Value #2'));
方案二:ASPxDropDownEdit + ASPxListBox(多选模拟)
这是 DevExpress 官方推荐的实现多选的方式,核心思路是:在 ASPxDropDownEdit 的下拉窗口中放置一个 ASPxListBox,并将其 SelectionMode 设为 CheckColumn(复选框列)。

页面标记示例
aspx
<dx:ASPxDropDownEdit ID="ddeLot" runat="server" ClientInstanceName="checkComboBox"
    Width="285px" AnimationType="None">
    <DropDownWindowTemplate>
        <dx:ASPxListBox ID="listBox1" runat="server" ClientInstanceName="checkListBox"
            SelectionMode="CheckColumn" EnableSelectAll="true"
            DataSourceID="dsLot" ValueField="Lot" TextField="Lot"
            ValueType="System.String" Height="200">
            <FilteringSettings ShowSearchUI="true" />
            <ClientSideEvents SelectedIndexChanged="updateText" Init="updateText" />
        </dx:ASPxListBox>
        <dx:ASPxButton ID="btnClose" runat="server" AutoPostBack="False" Text="Close">
            <ClientSideEvents Click="function(s, e){ checkComboBox.HideDropDown(); }" />
        </dx:ASPxButton>
    </DropDownWindowTemplate>
</dx:ASPxDropDownEdit>

显示选中的多项
ASPxDropDownEdit 的 Text 属性会自动存储选中项的 Text 值列表,各项之间以分号分隔。你只需通过客户端脚本监听 ASPxListBox 的 SelectedIndexChanged 事件,将选中项拼接后回写到 ASPxDropDownEdit 的编辑框中即可。

设置选中的多项(服务器端)
ASPxListBox 的 SelectedItems 集合提供了对选中项的访问。在服务器端可以通过遍历该集合来设置或读取选中的项:

csharp
// 假设 listBox1 是 ASPxListBox 的服务器端 ID
foreach (ListEditItem item in listBox1.SelectedItems)
{
    // 处理每个选中项
    string text = item.Text;
    string value = item.Value;
}

// 若要程序化设置选中项,可先清空再添加
listBox1.SelectedItems.Clear();
listBox1.SelectedItems.Add(listBox1.Items.FindByValue("Lot001"));
listBox1.SelectedItems.Add(listBox1.Items.FindByValue("Lot002"));
设置选中的多项(客户端)
javascript
// 获取所有选中项
var selectedItems = checkListBox.GetSelectedItems();
// 或逐个获取
var item = checkListBox.GetSelectedItem(); // 返回单个选中项

// 设置选中(通过 Value)
checkListBox.SelectItemsByValues(['Lot001', 'Lot002']);

注意事项
ASPxListBox 必须设置 ClientInstanceName,否则客户端脚本无法访问。

ASPxDropDownEdit 的 Text 属性中的分号分隔列表是显示多选结果的关键,建议在 SelectedIndexChanged 客户端事件中同步更新该文本。

如果需要回传服务器,可通过 ASPxHiddenField 或回调(Callback)机制将选中的值传递到服务器端。

官方演示页面(CheckComboBox Emulation)提供了完整的可运行示例,可直接参考:https://demos.devexpress.com/ASPxEditorsDemos/ASPxDropDownEdit/CheckComboBox.aspx。

渝公网安备 50011902000225号

渝ICP备18008233号-1