<选择>具有无限滚动下拉的小部件 [英] <Select> widget with infinite scroll dropdown

问题描述

在我的页面上，我有大约20个常见的html选择小部件。例如：

 < select> 
< option> 1< / option> 
 ... 
< option> 3000< / option> 
< / select> 
  

每个元素有3000个或更多的元素。所以我决定将它们转换为ajax选项，以便在滚动时动态加载项目。

我该怎么做？

解决方案

我使用 jQuery UI selectmenu 。我已经使用基本的JSON源来处理ajax请求，请自己完成这部分工作。

$（。ajax-combo）。selectmenu {width：100px，}）; $（.ajax-combo）。selectmenu（menuWidget）.addClass（make-scrolling）; $（.ajax-combo）。selectmenu （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（数据，函数（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 =stylesheethref =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> <选项→1< /选项> <选项→2< /选项> <选项→3< /选项> <选项→1< /选项> <选项→2< /选项> <选项→3< /选项> <选项→1< /选项> <选项→2< /选项> <选项→3< /选项> <选项→1< /选项> <选项→2< /选项> < / option> 3< / option>< / select>

At my page i have about 20 common html select widgets. For example:

<select>
    <option>1</option>
    ...
    <option>3000</option>
</select> 

that have 3000 or more elements in each one. So i have decided to convert them to ajax selects to load items dynamically when scrolling.

How can i do this ??

解决方案

I have provided a set of working example of combo-box using jQuery UI selectmenu. I have used basic JSON source for ajax request, please work on this part yourself.

$(".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>

这篇关于<选择>具有无限滚动下拉的小部件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！