如何使用select标记显示load更多功能
如何使用select标记显示load更多功能
提问于 2018-03-24 09:41:30
我有一个加载更多功能的代码，它非常适合列表项用于清单项目的小提琴。
现在，我正在尝试在select标记中复制相同的功能。当用户单击选项标签3值以及加载时，下拉列表应该是可见的，单击load之后，应该可以看到更多的下一组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();
}
});
});选择标记就在这里的完整代码
有谁能告诉我如何实现这个功能吗？
Stack Overflow用户
发布于 2018-03-24 11:04:39
首先，ID必须是唯一的。将它们更改为类或使用不同的ID。
其次，选项可以包含(因此避免div容器)：
允许内容:文本，可能带有转义字符(如é)。
最后，为第一个选项设置一个值，以简化其选择。
不能将单击事件处理程序附加到选项，而是附加到select。
尽量避免全局变量:它们会造成混乱，从长远来看，您将遇到测试和修复代码的麻烦。
$('#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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49463267
复制相关文章
相似问题
腾讯云开发者
