使用 jQuery 加载下拉列表

发布于 2024-11-09 12:38:01 字数 319 浏览 0 评论 0原文

当用户第一次单击 DropDownList 时，是否可以在 asp.NET 中加载下拉列表？

我会尽力解释一下。我有一个 aspx 页面，其中包含一个包含一项的 DropDownList。

ListItem listlt = new ListItem("UNDEFINED", "-1");
ddl.Items.Insert(0, listlt);

我想当用户单击 DropDownList 时加载 DropDownList 中的所有数据。这是因为dropdownlist数据量很大，页面加载很慢。

有什么想法吗？提前谢谢

原文

Is it possible to load a dropdownlist in asp.NET just when the user click the DropDownList for the firs time?

I will try to explain it. I have an aspx page with a DropDownList with one item.

ListItem listlt = new ListItem("UNDEFINED", "-1");
ddl.Items.Insert(0, listlt);

I want to load all data in the DropDownList when the user click on the DropDownList. This is because the dropdownlist has a lot of data and the load of the page is very slow.

any ideas?
thx in advance

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

想挽留 2024-11-16 12:38:01

您可以使用 PageMethods 来代替。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {


    }

    [WebMethod]
    public static Dictionary<string, string> getItems()
    {
        return new Dictionary<string, string>(){
            {"1","Item1"} ,{"2","Item2"}};
    }
}

ASPX

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title>jQuery to call page methods in ASP.NET</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
</head>
<body>
    <form id="Form1" runat="server">
    <asp:ScriptManager EnablePageMethods="true" ID="ScriptManager1" runat="server">
    </asp:ScriptManager>

    <script type="text/javascript">
        $(document).ready(function() {
            $('select#<%= DropDownList1.ClientID %>').click(function() {

                if (this.options.length <= 0) {
                    PageMethods.getItems(function(res) {
                        //alert('e');
                        for (r in res) {
                            //$(this).append($('<option value="'+ r+'">' + res[r] + '</option>'));
                            //$(this).append($('<option></option>'));
                            $('select#<%= DropDownList1.ClientID %>').append( $('<option></option>').val(r).html(res[r]) );
                        }
                    });
                }
            });
        });
    </script>
    <asp:DropDownList ID="DropDownList1" runat="server" />
    </form>
</body>
</html>

You can use PageMethods instead.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {


    }

    [WebMethod]
    public static Dictionary<string, string> getItems()
    {
        return new Dictionary<string, string>(){
            {"1","Item1"} ,{"2","Item2"}};
    }
}

ASPX

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title>jQuery to call page methods in ASP.NET</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
</head>
<body>
    <form id="Form1" runat="server">
    <asp:ScriptManager EnablePageMethods="true" ID="ScriptManager1" runat="server">
    </asp:ScriptManager>

    <script type="text/javascript">
        $(document).ready(function() {
            $('select#<%= DropDownList1.ClientID %>').click(function() {

                if (this.options.length <= 0) {
                    PageMethods.getItems(function(res) {
                        //alert('e');
                        for (r in res) {
                            //$(this).append($('<option value="'+ r+'">' + res[r] + '</option>'));
                            //$(this).append($('<option></option>'));
                            $('select#<%= DropDownList1.ClientID %>').append( $('<option></option>').val(r).html(res[r]) );
                        }
                    });
                }
            });
        });
    </script>
    <asp:DropDownList ID="DropDownList1" runat="server" />
    </form>
</body>
</html>

回复收藏 0 原文

谎言月老 2024-11-16 12:38:01

使用jquery load

$("select#theDropdownID").click(function(){
    $(this).load("thedropdownItems.html");
});

并在thedropdownItems.html

<option value='foo'>foo</option>
<option value='bar'>bar</option>
....

use jquery load

$("select#theDropdownID").click(function(){
    $(this).load("thedropdownItems.html");
});

And in thedropdownItems.html

<option value='foo'>foo</option>
<option value='bar'>bar</option>
....

回复收藏 0 原文

~没有更多了~

关于作者

蹲墙角沉默

暂无简介

0 文章

0 评论

22 人气

关注发私信

lorenzathorton8

文章 0 评论 0

关注

Zero

文章 0 评论 0

关注

萧瑟寒风

文章 0 评论 0

关注

mylayout

文章 0 评论 0

关注

tkewei

文章 0 评论 0

关注

17818769742

文章 0 评论 0

友情链接

文江博客

使用 jQuery 加载下拉列表

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

lorenzathorton8

Zero

萧瑟寒风

mylayout

tkewei

17818769742

友情链接

使用 jQuery 加载下拉列表

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

lorenzathorton8

Zero

萧瑟寒风

mylayout

tkewei

17818769742

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。