在我的页面上，我有大约 20 个常见的 html 选择小部件。例如:
<select>
<option>1</option>
...
<option>3000</option>
</select>
每个元素都包含 3000 个或更多元素。所以我决定将它们转换为 ajax 选择以在滚动时动态加载项目。
我该怎么做？？
最佳答案
这可以通过简单的 JQuery 来实现。不需要任何其他插件
var selectObj = $("#myselectbox");
var singleoptionheight = selectObj.find("option").height();
var selectboxheight = selectObj.height();
var numOfOptionBeforeToLoadNextSet = 2;
var lastScrollTop = 0;
var currentPageNo = 1;
var isAppending = false;
var currentScroll = 0;
$(document).ready(function() {
$(selectObj).scroll(function(event) {
OnSelectScroll(event);
});
});
function OnSelectScroll(event) {
var st = $(selectObj).scrollTop();
var totalheight = selectObj.find("option").length * singleoptionheight;
if (st > lastScrollTop) {
// downscroll code
$("#direction").html("downscroll");
currentScroll = st + selectboxheight;
$("#scrollTop").html(currentScroll);
$("#totalheight").html(totalheight);
if ((currentScroll + (numOfOptionBeforeToLoadNextSet * singleoptionheight)) >= totalheight) {
currentPageNo++;
LoadNextSetOfOptions(currentPageNo);
}
} else {
// upscroll code
$("#direction").html("upscroll");
}
lastScrollTop = st;
}
function LoadNextSetOfOptions(pageNo) {
//here we can have ajax call to fetch options from server.
//for demo purpose we will have simple for loop
//assuming pageNo starts with 1
var startOption = ((pageNo - 1) * 10) + 1; //for example if pageNo is 2 then startOption = (2-1)*10 + 1 = 11
var endOption = startOption + 10; //for example if pageNo is 2 then endOption = 11 + 10 = 21
for (i = startOption; i < endOption; i++) {
$(selectObj).append("<option>" + i + "</option>");
}
$(selectObj).scrollTop(currentScroll - (selectboxheight));
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<p>Infinite scroll for select box</p>
<select id="myselectbox" size="5">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
<p>Direction: <span id="direction"></span>
</p>
<p>scrollTop: <span id="scrollTop"></span>
</p>
<p>totalheight: <span id="totalheight"></span>
</p>
</body>
</html>关于javascript - <Select> 带有无限滚动下拉菜单的小部件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31884192/