Jquery

Question

<select multiple>
<option></option>
  <option>a1</option>
  <option>b1</option>
  <option>c1</option>
  <option>d1</option>
  .
  .
  .
  .
  .
  <option>u100</option>
  <option>v100</option>
  <option>w100</option>
  <option>x100</option>
  <option>y100</option>
  <option>z100</option>
</select>

在这里，我有2600个选项，我该如何展示 我有成千上万的选择，所以我决定把分页放在那个下降中。但我对此没有任何想法。 我正在使用选择的插件来下拉

Answer 1

首先，在下拉菜单中，您不需要分页。分页是混合表的一个很好的选择。

对于可选的下拉菜单，您可以使用 autocompleter 。自动完成程序是非常用户友好的解决方案。

但是如果真的想要分页选项，你可以创建一个正在监听下一个或上一个按钮或选项的监听器，然后从数据列表中获取新选项。

以下是一个简单示例：JsFiddle

如果需要，您可以添加更多元素。但这不是一个好的解决方案。

但一次又一次如果你真的想要在下拉菜单中使用<ul> <li>组合并创建更多用户友好的选项区域。

示例（你必须定义很多东西才能得到错误）：

<select id="select">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option value="front">Next Page</option>
  <option value="back">Pre Page</option>
</select>


$(document).ready(function () {
        var data = [4,5,6,7,8,9];
    var changeIndex = 0;
    $('#select').change(function () {
    console.log($(this).val());
        if($(this).val()=='front'){
        $(this).empty();
        var newOption = '<option>'+data[changeIndex++]+'</option>';
        $(this).append(newOption);
        $(this).append(' <option value="front">Next Page</option>');
        $(this).append(' <option value="back">Pre Page</option>');
      }
      if($(this).val()=='back'){
        $(this).empty();
        var newOption = '<option>'+data[changeIndex-2]+'</option>';
        changeIndex--;
        $(this).append(newOption);
        $(this).append(' <option value="front">Next Page</option>');
        $(this).append(' <option value="back">Pre Page</option>');
      }
    });
});