2013-05-13 95 views
0

我的代码是如何在asp下拉列表中添加垂直滚动条?

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

和我的CSS代码是.From{ width:250px;height:25px}

高度不能太大,因为有大量的它的项目。 如何添加垂直滚动条到我的下拉菜单中?

+0

什么是“溢出-Y:滚动”在你的CSS? – Alex 2013-05-13 07:05:09

回答

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> 
0

在CSS类添加overflow-y:auto,当博扬25px的选项长度的增加,你会得到你的dropdpwn的y轴滚动条

+0

我尝试过overflow:auto,但它对下拉菜单没有任何影响 – mck 2013-05-13 07:31:36

0

选项1.删除下拉的高度,使得它会自动增长

选项2.如果是在一个表格单元格或一些东西,不允许它生长然后把它放在一个div像下面

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

这里有一些例子click here