Question

与建议使用JavaScript框架的其他答案不同，我想知道显示记录的可能解决方案太慢。

Possiblilities（我的观点）：

1-加载只说100条记录，当滚动到最后一条记录时，显示接下来的100条记录（共200条），依此类推。（“但如何实现这一点”是个问题）。在这种情况下，可以使用Ajax。

2-如果元素的任何属性可以缓冲记录，或者我们可以用JavaScript缓冲记录。

除此之外，我是新手。必须有一个解决方法，请建议我正确的方法。一些工作的例子会很明显。

document.writeln("<select>");
for(var i = 1; i < 10000; i++){
	document.writeln("<option value='" + i + "'>" + i + "</option>");
}
document.writeln("</select>");

<html>
<head>
<script src="script.js"></script>
</head>
<body>
</body>
</html>

Answer 1

 <!DOCTYPE html>
        <html>
        <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>      

        </head>
        <body>
        <!-- you can adjust showing number of data from here -->
        <select id='slr' onfocus='this.size=5;' onblur='this.size=1;' 
                onchange='this.size=1; this.blur();' >
        <option>ram1</option>
        <option>ram2</option>
        <option>ram3</option>
        <option>ram4</option>
        <option>ram5</option>
        <option>ram6</option>
        <option>ram7</option>
        <option>ram8</option>
        <option>ram9</option>
        <option>ram1</option>
        <option>ram2</option>
        <option>ram3</option>
        <option>ram4</option>
        <option>ram5</option>
        <option>ram6</option>
        <option>ram7</option>
        <option>ram8</option>
        <option>ram9</option>
        <option>ram1</option>
        <option>ram2</option>
        <option>ram3</option>
        <option>ram4</option>
        <option>ram5</option>
        </select>

        </body>
        <script>
          $('#slr').scroll(function() {
           //Its 90 px far from reaching the bottom you can adjust its value its depend on scroller size and scrollers size is depend on how much data you are showing
            if(($(this)[0].scrollHeight-$(this).scrollTop())<=90)
            {
        //you can call you ajax function here and add value in innerhtml of select tag
        alert($(this)[0].scrollHeight);

            }

        });
        </script>
        </html>

在Chrome浏览器中，组合框显示的数据太慢，无法显示大数据

1 个答案: