asp.net - 下拉列表应显示 6 个项目仅保留在滚动

Question

我有一个包含 15 种数据类型的下拉列表，当我单击下拉列表时，它看起来很笨拙，你能建议我如何在 asp.net 中的下拉列表中滚动

Answer 1

我想你想要这个：

<asp:DropDownList ID="ddl" width="100px" onclick="this.size=1;" onMouseOver="this.size=5;" onMouseOut="this.size=1;" style="position:absolute;" runat="server">
             <asp:ListItem>TextTextText1</asp:ListItem>
             <asp:ListItem>TextTextText2</asp:ListItem>
             <asp:ListItem>TextTextText3</asp:ListItem>
             <asp:ListItem>TextTextText4</asp:ListItem>
             <asp:ListItem>TextTextText5</asp:ListItem>
             <asp:ListItem>TextTextText6</asp:ListItem>
             <asp:ListItem>TextTextText7</asp:ListItem>   
             <asp:ListItem>TextTextText8</asp:ListItem>
             <asp:ListItem>TextTextText9</asp:ListItem>
             <asp:ListItem>TextTextText10</asp:ListItem>
             <asp:ListItem>TextTextText11</asp:ListItem>    
        </asp:DropDownList>

Answer 2

这里 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> 

否则请点击此链接：

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

或http://forums.asp.net/t/1905270.aspx?DropDownList+Scroll+Bars

Answer 3

尝试使用下面的代码。

<asp:DropDownList runat="server" ID="ddlColors" onmousedown="this.size=5;"  >
            <asp:ListItem>Red</asp:ListItem>
            <asp:ListItem>Green</asp:ListItem>
            <asp:ListItem>Blue</asp:ListItem>
            <asp:ListItem>Yellow</asp:ListItem>
            <asp:ListItem>White</asp:ListItem>
            <asp:ListItem>Black</asp:ListItem>
            <asp:ListItem>Purple</asp:ListItem>
            <asp:ListItem>no color</asp:ListItem>
    </asp:DropDownList>

或者您可以使用 CSS 的溢出属性和下拉菜单中的高度属性来添加滚动条。

.dropmenudiv
{
  height: 300px;
  max-height: 300px;
  overflow-y: scroll;
}