如何在ASP.NET中的两行下拉列表中显示所选文本? [英] How to display selected text on drop down list in 2 lines in ASP.NET?

问题描述

我在asp.net网络表单中有一个 dropdownlist ，具有长值作为其选项.每次选择一个值时，它都应显示在下拉列表字段中.

I have a dropdownlist in asp.net webform with long values as its options. Every time I select a value, it should be displayed on the dropdownlist field.

<asp:DropDownList ID="addressDdl" runat="server" CssClass="form-control" Width="210px">
 </asp:DropDownList>

我使用以下方法填充下拉列表:

I populate my dropdownlist using this method:

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--");
}

但是，由于我的下拉列表不够长，因此只能显示其中的一部分.有什么方法可以使下拉列表能够在两行中显示所选的值?

However, since my dropdownlist is not long enough, it can only display parts of it. Is there any way so the dropdownlist is able to display the selected value in 2 lines?

以下是我面临的问题的一个示例:

Below is an example of the problem I face:

推荐答案

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

Since you're using form-control CSS class, I'm sure that you're using Bootstrap CSS.

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

In Bootstrap, it is possible to implement multi-line options using data-content attribute for select element.

注意:对于下面提供的2个首选选项，请确保要在 data-content 中显示的任何长字符串值都具有< br/> 标记插入它们之间(请参见以下示例 fiddle ).可以使用插入标签 String.Insert (建议使用将包装后的值存储在 address 类中的其他属性):

Note: For 2 first choices available below, ensure any long string value you want to show in data-content have <br /> tag inserted between them (see this example fiddle). The tag can be inserted by using String.Insert (suggested using additional property that stores wrapped value in address class):

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 服务器控件实现自定义属性，请在数据绑定后将其手动添加到代码隐藏中.这是代码隐藏部分:

1) To implement the custom attribute with asp:DropDownList server control, add it manually in code-behind after data binding. Here is the code-behind part:

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)作为替代，可以使用 Repeater 将 DropDownList 替换为普通的 select 元素，但替换为 ItemTemplate 设置选项属性:

2) As an alternative, a Repeater may be used to replace DropDownList with plain select element, but with ItemTemplate to set option attributes:

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)我知道使用多行下拉菜单的另一种方法是与 selectPicker 一起在CSS选择器中操纵宽度:

3) Another way I know to use multi-line dropdown is manipulating width in CSS selector together with 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#

是否可以使用多行选项?

这篇关于如何在ASP.NET中的两行下拉列表中显示所选文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！