Question

我在Asp.Net Page中有一个国家/地区DropDownList。我从数据库绑定了DropDownList。它给了我239项。它是页面中非常大的滚动。

所以，我的问题如何在Dropdown中设置10项，然后在List中滚动。

<asp:DropDownList ID="ddlcountry" AutoPostBack="true" AppendDataBoundItems="true"
     runat="server" OnSelectedIndexChanged="ddlcountry_SelectedIndexChanged">
</asp:DropDownList>

Answer 1

实际上这是一个非常有趣且棘手的任务，我们需要做一些配置并为此应用一些css

由于 DropDownList 没有内置滚动条，因此我们需要使用OnMouseDown, OnFocusOut,OnDblClick属性手动执行此操作

<asp:DropDownList ID="ddlcountry" AutoPostBack="true" AppendDataBoundItems="true"
     runat="server" 
     CssClass="DDlCountry"  
     OnMouseDown="this.size=5;" 
     OnFocusOut="this.size=1;" 
     OnDblClick="this.size=1;">
</asp:DropDownList>

为此DDlCountry

添加新的CSS类

.DDlCountry {
        width: 128px;
        margin: 0 15px 0 0;
        font: 12px tahoma;
        max-height: 200px;
        overflow-y: scroll;
        position: relative;
    }

Answer 2

您可以通过两种方式进行设置。

一个是，

    <asp:DropDownList ID="DropDownList1" runat="server" Height="50px" 
Style="position: static"> </asp:DropDownList>

或

<asp:DropDownList ID="DropDownList1" size="10" runat="server"></asp:DropDownList>

Answer 3

您可以使用Size属性

<asp:DropDownList Size="10" ID="ddlcountry" AutoPostBack="true"  AppendDataBoundItems="true"
 runat="server"  OnSelectedIndexChanged="ddlcountry_SelectedIndexChanged"/>

Answer 4

为什么使用滚动使用 select2 搜索插件。

Select2 Example

1.参考.aspx文件中的select2.css和select2.js

2

 <asp:DropDownList ID="ddlProductSubType" runat="server" ClientIDMode="Static" AppendDataBoundItems="True">
                                        <asp:ListItem Value="">Select</asp:ListItem>

                                    </asp:DropDownList>

3

  <script>
      $(function() {
          $('#ddlProductSubType').select2({
              placeholder: 'select a state',
              //tags: "true",
              //allowClear: true,
              theme: "classic"
          });
});
  </script>

N.B我已经使用过它，它可以很好地响应3,000个下拉列表项目。如果你想过滤/按需加载，select2文档中有选项

Asp.Net下拉列表设置项目视图限制

4 个答案: