我有这样一种情况，在一个页面上有 7-8 个下拉菜单，其中有大量数据需要绑定(bind)。我有一个有 2 个选项的单选按钮列表，在选择其中任何一个时，我从缓存中获取数据并绑定(bind)所有下拉菜单，这大约需要 6-7 秒。但是，我不会每次都使用所有下拉菜单，因为基本功能是基于日期范围的。所以我在想，如果我可以按需加载下拉菜单，即点击下拉箭头，我会绑定(bind)下拉菜单，这样会更好，用户在单选按钮列表之间切换时不必等待 6-7 秒选择。我尝试在下拉菜单的 onClick 上调用一个 JS 函数，然后从那里触发一个按钮的事件。我在点击下拉菜单时获取数据，但是，一旦数据被绑定(bind)，下拉菜单就会折叠起来，用户必须再次点击才能从下拉列表项目中进行选择。我只是想知道是否有人可以给我一个想法，以便下拉菜单不会折叠并在绑定(bind)后保持不变，否则就是延迟加载下拉列表的完整想法。我还指定了我的 POC 中的一些代码。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1- transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" language="javascript">
function load() {
//debugger;
var dropdown = document.getElementById('DropDownList1');
var ln = dropdown.options.length;
if (ln == 0) {
var btn = document.getElementById('Button1');
btn.click();
}
dropdown.click();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"/>
<div>
<asp:DropDownList ID="DropDownList1" runat="server" onClick="javascript:load();">
</asp:DropDownList>
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" Style="display: noone;"/>
</div>
</form>
</body>
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
ArrayList arr = new ArrayList();
arr.Add("Item1");
arr.Add("Item2");
arr.Add("Item3");
DropDownList1.DataSource = arr;
DropDownList1.DataBind();
}
}
</html>
最佳答案
我建议您使用不同的 javascript 事件来触发此行为。我能想到的最好的方法是使用 onfocus和 onmouseover事件。
使用 onfocus事件将允许您的页面为导航到下拉列表而不直接单击控件的人工作；一个人可以使用键盘和选项卡，直到焦点到达下拉列表。或者(虽然可能不那么相关)，一个人可能会点击 <label>下拉列表控件的标记。这样做也会导致焦点设置在下拉列表上。
使用 onmouseover事件将允许您在用户点击之前填充下拉列表，从而防止您提到的必要的第二次点击。
编辑:我做了一些实验，发现您可能想要使用 onmousedown事件而不是 onmouseover事件。优点是如果用户恰好将鼠标滑过下拉列表而没有实际点击它，它不会不必要地加载数据，并且不会中断下拉列表的扩展，因此用户只需要单击一次以展开它。缺点是用户可能必须等待数据，因为您要等到用户实际点击才能决定加载数据。根据您拥有的数据量以及服务器检索数据的速度，这种等待时间可能会很长，也可能不会很长。
下面是一个简单的示例页面，我在其中演示了如何使用这两个 javascript 事件:
<html>
<head>
<script type="text/javascript" language="javascript">
function load(ddl)
{
if(ddl.options.length == 0)
{
ddl.options[0] = new Option("Option 1", "1", false, false);
ddl.options[1] = new Option("Option 2", "2", false, false);
ddl.options[2] = new Option("Option 3", "3", false, false);
}
}
</script>
</head>
<body>
<label for="DropDownList1">Drop Down List 1:</label>
<select id="DropDownList1" onfocus="load(this);" onmouseover="load(this);">
</select>
</body>
</html>
我没有尝试运行您的示例代码，但在我看来您正在使用 javascript 触发按钮单击以引起回发，以便您可以在服务器上填充下拉列表控件。如果您正在进行回发，那么您将无法避免重新加载整个页面或至少部分页面，这意味着您的下拉列表将不会保持展开状态。
我建议使用 ajax 调用服务器以检索数据，而不是导致回发，然后获取该数据并使用它来填充 javascript 中的下拉列表。
这似乎是一篇不错的文章，解释了如何设置类似的东西:http://www.mikesdotnetting.com/Article/97/Cascading-DropDownLists-with-jQuery-and-ASP.NET This article is describing how to implement cascading drop down lists,这听起来不像你想做的，但它非常接近。
关于c# - 单击下拉列表的箭头/延迟加载下拉列表加载下拉列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3735151/