All geek questions in one place

Loading a drop-down list by clicking a drop-down arrow / lazy loading a drop-down

I have a situation where there are 7-8 drop-down menus on the page that have a large amount of data to bind. I have a list of radio books with two choices and when I select any of them I get data from the cache and link all the drop-down lists that take about 6-7 seconds. But I do not use the entire drop-down list every time, since the basic functionality is based on a date range. Therefore, I thought that if I could load the drop-down list on demand, that is, by clicking the down arrow, I would snap a drop-down menu, it would be better, and the user would not have to wait these 6-7 seconds when switching between the radioobuttonlist choices. I tried to call the JS function in the onClick drop-down list and from there fire one button event. I get data populated with a mouse click, but the dropdown menu is crashing,once the data is bound and the user must click again to select from the drop-down list of items. I am just wondering if anyone can give me an idea so that the dropdown list will not crash and remains after binding, or a complete picture of the lazy loading of the dropdown list. I also pointed out some of my code from my 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>
+3
1

javascript, . , , - onfocus onmouseover.

onfocus , , ; , . (, , ) <label> . , .

onmouseover , , , .

EDIT: , 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 , , , , , .

+3

Source: https://habr.com/ru/post/1765284/

More articles:


All Articles