如何在 ASP.NET 中的 2 行下拉列表中显示所选文本？

由于您使用的是form-controlCSS 类，因此我确定您使用的是 Bootstrap CSS。

在 Bootstrap 中，可以使用元素的data-content属性来实现多行选项select。

注意：对于下面可用的 2 个首选，请确保要显示的任何长字符串值data-content都<br />在它们之间插入了标记（请参阅此示例fiddle）。可以使用以下方法插入标记String.Insert（建议使用在address类中存储包装值的附加属性）：

foreach (var addr in addressAll)
{
    if (addr.address.Length >= [position_index])
    {
        // new property to store wrapped values to be displayed in data-content attribute
        addr.longAddress = addr.address.Insert([position_index], "<br />");
    }
}

1) 使用asp:DropDownList服务器控件实现自定义属性，在数据绑定后在代码隐藏中手动添加。这是代码隐藏部分：

protected void Page_Load(object sender, EventArgs e)
{
     List<address> addressAll = ... //get table data from SQL that has been returned as a list

     addressDdl.DataSource = addressAll;
     addressDdl.DataTextField = "address";
     addressDdl.DataValueField = "addressID";
     addressDdl.DataBind();
     addressDdl.Items.Insert(0,"--Select--");

     // before transform the list into array, use foreach loop provided above

     var arr = addressAll.ToArray();

     // note: zero-index skipped here
     for (int i = 1; i <= addressDdl.Items.Count; i++)
     {
         // add data-content attribute for select options
         addressDdl.Items[i].Attributes.Add("data-content", arr[i - 1].longAddress.ToString());
     }
}

2) 作为替代， aRepeater可用于替换DropDownList普通select元素，但ItemTemplate用于设置选项属性：

ASPX

<asp:Repeater ID="rptDeliveryAddress" runat="server">
    <HeaderTemplate>
        <select id="addressDdl">
            <option value="">--Select--</option>
    </HeaderTemplate>
    <ItemTemplate>
            <option data-content="<%# DataBinder.Eval(Container.DataItem, "[longAddress]") %>" value="<%# DataBinder.Eval(Container.DataItem, "[address]") %>"><%# DataBinder.Eval(Container.DataItem, "[address]") %></option>
    </ItemTemplate>
    <FooterTemplate>
        </select>
    </FooterTemplate>
</asp:Repeater>

3) 我知道的另一种使用多行下拉菜单的方法是在 CSS 选择器中操作宽度selectPicker：

ASPX

<asp:DropDownList ID="addressDdl" runat="server" CssClass="form-control selectpicker large-bootstrap-select" ... />

CSS

/* CSS Class */
.bs-container.large-bootstrap-select {
   .dropdown-menu {
      width: 100px; /* set this attribute with desired size in pixels */
      li a span.text {
         word-wrap: break-word;
         white-space: normal;
      }
   }
}

JS

$('#<%= addressDdl.ClientID %>').selectpicker();

参考：

如何使用 C# 将数据属性添加到下拉菜单

是否可以有多行选项？