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

克尔佐兹

dropdownlist在 asp.net 网络表单中有一个长值作为其选项。每次我选择一个值时,它都应该显示在dropdownlist字段上。

<asp:DropDownList ID="addressDdl" runat="server" CssClass="form-control" Width="210px">
 </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--");
}

但是,由于我dropdownlist的不够长,所以只能显示其中的一部分。有什么办法dropdownlist可以在 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# 将数据属性添加到下拉菜单

是否可以有多行选项?

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在Asp .net MVC中验证下拉列表

来自分类Dev

如何在 ASP.Net MVC 中创建下拉列表

来自分类Dev

如何在asp.net Web应用程序中使用javascript根据下拉列表中的所选选项显示不同的输入类型

来自分类Dev

如何在QTextBrowser中居中显示所选文本

来自分类Dev

如何在VB.Net/C#和ASP.NET的下拉列表中显示对象属性

来自分类Dev

如何在ASP.NET MVC中映射2个差异列表

来自分类Dev

如何消除下拉列表中显示的重复数据?在ASP.net中的FormView中?

来自分类Dev

如何在ASP.NET中删除asp:calendar的“周末”?

来自分类Dev

如何在Asp.net Web Api 2中使用多种Put和Post方法

来自分类Dev

如何在Asp.Net Identity 2中手动检查密码?

来自分类Dev

如何在ASP.NET Core 1.0 RC2中加载程序集

来自分类Dev

如何在ASP.Net MVC Identity 2中更改密码验证?

来自分类Dev

如何在IIS中为OWIN配置ASP.NET Web API 2?

来自分类Dev

如何在ASP.NET Core RC2中制作Websocket服务器?

来自分类Dev

如何在ASP.net Core 2中创建动态API

来自分类Dev

如何在ASP.NET Web API 2中具有可选的请求模型属性?

来自分类Dev

如何在Asp.net Web Api 2中使用多种Put和Post方法

来自分类Dev

如何在ASP.NET Core RC2中制作Websocket服务器?

来自分类Dev

如何在ASP.NET Identity 2中使用TPH(每个层次结构的表)

来自分类Dev

如何在asp.net core中实现经典的webapi 2路由

来自分类Dev

如何在asp.net web api 2中实现依赖注入

来自分类Dev

如何在 Jetbrains Rider 中為 ASP.NET CORE 2 設置 XUnit 測試?

来自分类Dev

如何在asp.net razor中连接2个视图

来自分类Dev

如何在ASP.NET中获取Facebook朋友列表?

来自分类Dev

如何在asp.net中配置数据列表的索引?

来自分类Dev

如何在asp.net中动态显示记录?

来自分类Dev

asp.net MVC如何在集合中显示值

来自分类Dev

如何在asp.net中显示“是”或“否”消息框?

来自分类Dev

如何在 asp.net Mvc 中存储级联列表中的文本值元素?

Related 相关文章

  1. 1

    如何在Asp .net MVC中验证下拉列表

  2. 2

    如何在 ASP.Net MVC 中创建下拉列表

  3. 3

    如何在asp.net Web应用程序中使用javascript根据下拉列表中的所选选项显示不同的输入类型

  4. 4

    如何在QTextBrowser中居中显示所选文本

  5. 5

    如何在VB.Net/C#和ASP.NET的下拉列表中显示对象属性

  6. 6

    如何在ASP.NET MVC中映射2个差异列表

  7. 7

    如何消除下拉列表中显示的重复数据?在ASP.net中的FormView中?

  8. 8

    如何在ASP.NET中删除asp:calendar的“周末”?

  9. 9

    如何在Asp.net Web Api 2中使用多种Put和Post方法

  10. 10

    如何在Asp.Net Identity 2中手动检查密码?

  11. 11

    如何在ASP.NET Core 1.0 RC2中加载程序集

  12. 12

    如何在ASP.Net MVC Identity 2中更改密码验证?

  13. 13

    如何在IIS中为OWIN配置ASP.NET Web API 2?

  14. 14

    如何在ASP.NET Core RC2中制作Websocket服务器?

  15. 15

    如何在ASP.net Core 2中创建动态API

  16. 16

    如何在ASP.NET Web API 2中具有可选的请求模型属性?

  17. 17

    如何在Asp.net Web Api 2中使用多种Put和Post方法

  18. 18

    如何在ASP.NET Core RC2中制作Websocket服务器?

  19. 19

    如何在ASP.NET Identity 2中使用TPH(每个层次结构的表)

  20. 20

    如何在asp.net core中实现经典的webapi 2路由

  21. 21

    如何在asp.net web api 2中实现依赖注入

  22. 22

    如何在 Jetbrains Rider 中為 ASP.NET CORE 2 設置 XUnit 測試?

  23. 23

    如何在asp.net razor中连接2个视图

  24. 24

    如何在ASP.NET中获取Facebook朋友列表?

  25. 25

    如何在asp.net中配置数据列表的索引?

  26. 26

    如何在asp.net中动态显示记录?

  27. 27

    asp.net MVC如何在集合中显示值

  28. 28

    如何在asp.net中显示“是”或“否”消息框?

  29. 29

    如何在 asp.net Mvc 中存储级联列表中的文本值元素?

热门标签

归档