Question

我有一个加载更多功能代码，对列表项非常适用 Fiddle for list items

现在我试图在select标签内复制相同的功能。当用户点击选项标记3的值以及加载更多内容时，下拉列表应该是可见的，点击加载后更多下一组3个项目应该是可见的而不关闭下拉列表

我正在尝试的代码是

<select class="form-control" id="myList">
  <option  id="sec" value="">Please select</option>  
  <option  id="sec" value="1">1</option>
  <option  id="sec" value="2">2</option>
  <option  id="sec" value="3">3</option>
  <option  id="sec" value="4">4</option>
  <option  id="sec" value="5">5</option>
  <option  id="sec" value="6">6</option>
  <option  id="sec" value="7">7</option>
  <option  id="sec" value="8">8</option>
  <option  id="sec" value="9">9</option>
  <option value="">
    <div id="loadMore">Load more</div>
  </option>
</select>

$(document).ready(function () {
    size_li = $("#sec").size();
    x=3;
    $('#sec:lt('+x+')').show();
    $('#loadMore').click(function () {
        x= (x+5 <= size_li) ? x+5 : size_li;
        $(' #sec:lt('+x+')').show();
        if(x == size_li){
            $('#loadMore').hide();
        }
    });
});

选择标记is here

的完整代码

任何人都可以告诉我如何实现此功能

Answer 1

首先，ID必须是唯一的。将它们更改为类或使用不同的ID。

其次，option可以包含（因此避免使用div容器）：

允许的内容：文字，可能包含转义字符（例如é）。

最后，将值设置为第一个选项以简化其选择。

单击事件处理程序无法附加到选项，而是附加到选择。

尽量避免全局变量：它们会产生混淆，从长远来看，您将无法测试和修复代码。

$('#myList .sec:lt(3)').toggleClass('sec');
$('#myList').on('click', function (e) {
    if (this.selectedOptions[0].classList.contains('loadMore')) {
        $('#myList').val('0');
        $('#myList .sec:lt(5)').toggleClass('sec');
        if ($('#myList .sec').length == 0) {
            $('#myList .loadMore').hide();
        }
    }
});

.sec{
  display:none;
}
.loadMore {
    color:green;
    cursor:pointer;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<select class="form-control" id="myList">
    <option  class="sec" value="0">Please select</option>
    <option  class="sec" value="1">1</option>
    <option  class="sec" value="2">2</option>
    <option  class="sec" value="3">3</option>
    <option  class="sec" value="4">4</option>
    <option  class="sec" value="5">5</option>
    <option  class="sec" value="6">6</option>
    <option  class="sec" value="7">7</option>
    <option  class="sec" value="8">8</option>
    <option  class="sec" value="9">9</option>
    <option  class="sec" value="10">10</option>
    <option  class="sec" value="11">11</option>
    <option  class="sec" value="12">12</option>
    <option  class="sec" value="13">13</option>
    <option  class="sec" value="14">14</option>
    <option  class="sec" value="15">15</option>
    <option class="loadMore" value="">Load more</option>
</select>

Answer 2

我做了一些改动，我将在下面列出：

选项 id='sec'更改为class='sec'。 ID和类之间的区别在于ID可用于标识一个元素，而一个类可用于标识多个，因此我们不能在html中多次使用相同的 ID 页。

而不是option tag的点击事件不起作用，我将点击事件更改为select

如果点击var x选项select box，

loadMore将保持x的当前状态。

$(document).ready(function () {
  var size_li = $(".sec").size();
  var x=0;
  $('#myList').on('click', function () {
      if($(this).val() == "load"){
        x += 3; // for showing next 3 option
        $('.sec:lt('+x+')').show(); // will show till x value from total option with sec class
        if(x >= size_li){
          $('#loadMore').hide();
        }
      }
  });
});

.sec{ display:none;
}
#loadMore {
    color:green;
    cursor:pointer;
}
#loadMore:hover {
    color:black;
}
#showLess {
    color:red;
    cursor:pointer;
    display:none;
}
#showLess:hover {
    color:black;
}
#myList li{ display:none;
}
#loadMore {
    color:green;
    cursor:pointer;
}
#loadMore:hover {
    color:black;
}
#showLess {
    color:red;
    cursor:pointer;
    display:none;
}
#showLess:hover {
    color:black;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select class="form-control" id="myList">
  <option value="">Please select</option>  
  <option value="1">1</option>
  <option value="2">2</option>
  <option  value="3">3</option>
  <option  class="sec" value="4">4</option>
  <option  class="sec" value="5">5</option>
  <option  class="sec" value="6">6</option>
  <option  class="sec" value="7">7</option>
  <option  class="sec" value="8">8</option>
  <option  class="sec" value="9">9</option>
  <option id="loadMore" value="load">
    Load more
  </option>
</select>

如何使用select标签显示加载更多功能

2 个答案: