Question

我有一个15datatypes的下拉列表，当我点击下拉列表时看起来很笨拙，你能不能建议我如何在asp.net的dropdownlist中放置滚动

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的overflow属性与下拉菜单中的height属性结合使用来添加滚动条。

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

下拉列表应显示仅滚动的6个项目

3 个答案: