Question

我的代码是

<asp:DropDownList ID="ddlFrom" runat="server" CssClass="From"></asp:DropDownList>

我的css代码为.From{ width:250px;height:25px}

高度不能太大，因为其中有大量物品。如何在我的下拉列表中添加垂直滚动条？

Answer 1

网络上有一些第三方控件，你可以轻松地将它们搞定。我只是提出了一个非常简单的解决方法，涉及DropDownExtender（AJAX ControlToolkit），TextBox，ListBox和几行Javascript。

此处TextBox将保留列表框的选定值。我的ASPX代码如下：

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:TextBox ID="TextBox1" runat="server" Text="Select your item" CssClass="MyTextBox"></asp:TextBox>
            <div style="padding: 4px;" id="ItemsDiv" runat="server">
                <asp:ListBox ID="ListBox1" runat="server" onclick="callme()" CssClass="MyDropDown" Rows="6">
                </asp:ListBox>
            </div>
            <asp:DropDownExtender ID="DropDownExtender1" runat="server" TargetControlID="TextBox1"
                DropDownControlID="ItemsDiv">
            </asp:DropDownExtender>
        </ContentTemplate>
    </asp:UpdatePanel>
<script>
   function callme() { 
           element = document.getElementById("ListBox1"); 
            str = element.options[element.selectedIndex].value; 
            document.getElementById("TextBox1").value = str; 
        } 
</script>

Answer 2

选项1.删除下拉列表的高度，使其自动增长

选项2.如果它位于表格单元格或不允许其增长的内容中，则将其放入如下所示的div中

<div style="overflow-y:scroll; height:50px;
overflow: -moz-scrollbars-horizontal;">
<select....></select>
</div>

以下是一些示例click here

Answer 3

在css类中添加overflow-y:auto，当选项长度增加25yx时，你会得到dropdpwn的y轴滚动条

Answer 4

嗨，请查看此链接，了解带有垂直滚动条的精彩下拉列表

http://blogs.msdn.com/b/rakkimk/archive/2011/05/02/dropdownlist-html-select-vertical-scrollbar-number-of-items.aspx

如何在asp下拉列表中添加垂直滚动条？

4 个答案: