单击下拉箭头/延迟加载下拉列表时加载下拉列表

我有一种情况，在页面上有7-8个下拉列表，这些下拉列表中有大量要绑定的数据。我有一个单选按钮列表有2个选择，并选择它们中的任何一个，我从缓存中获取数据并绑定所有需要大约6-7秒的下拉菜单。但是，由于基本功能基于日期范围，因此每次都不使用全部下拉菜单。所以我在想，如果我可以根据需要加载下拉列表，例如点击下拉箭头，我会绑定下拉菜单，这样会更好，用户不必等待那些6-7秒的时间切换radiobuttonlist选择。我试着在下拉的onClick上调用一个JS函数，并从那里触发一个按钮的事件。我得到的数据是在下拉菜单中填充的，但是，一旦数据绑定，下拉菜单就会崩溃，用户不得不再次点击以从下拉列表项中进行选择。我只是想知道是否有人可以给我一个想法，以便下拉菜单在绑定之后不会崩溃并保留，或者完全没有延迟加载下拉列表。我也从我的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>

来源

2010-09-17 user258427

我建议您使用不同的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 本文描述如何实现级联下拉列表，这听起来并不完全像你想要做什么，但它非常接近。

来源

2010-09-17 21:54:11

单击下拉箭头/延迟加载下拉列表时加载下拉列表

回答

相关问题