Question

在我的页面上，我有大约20个常见的html选择小部件。例如：＆LT;选择＆GT; ＆LT;选项→1＆LT; /选项＆GT; ... ＆LT;选项＆GT; 3000＆LT; /选项＆GT; ＆LT; /选择＆GT; 每个都有3000个或更多元素。所以我决定将它们转换为ajax选择在滚动时动态加载项目。我怎样才能做到这一点？？

Answer 1

我使用jQuery UI selectmenu提供了一组组合框的工作示例。我已经为ajax请求使用了基本的JSON源代码，请自行处理这部分内容。

$(".ajax-combo").selectmenu({
  "width": "100px",
});
$(".ajax-combo").selectmenu("menuWidget").addClass("make-scrolling");
$(".ajax-combo").selectmenu("menuWidget").scroll(function(e) {
  if (e.currentTarget.scrollHeight - 10 < e.currentTarget.scrollTop + $(e.currentTarget).height()) {
    var curTar = e.currentTarget;
    var lastTop = curTar.scrollTop;
    $.getJSON("http://echo.jsontest.com/10/test/20/rest/30/best/40/vest/50/fest", function(data) {
      $.each(data, function(key, val) {
        $(".ajax-combo").append("<option value='" + key + "'>" + val + "</option>");
      });
      $(".ajax-combo").selectmenu("refresh");
      curTar.scrollTop = lastTop;
    });
  }
});

.make-scrolling {
  overflow-y: scroll;
  height: 150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<select class="ajax-combo">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

Answer 2

这可以通过简单的JQuery实现。不需要任何其他插件

＆＃13;

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));

}

＆＃13;

<!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>

＆＃13;

带有无限滚动下拉列表的<select>小部件

2 个答案: