Javascript 如何使用选择标记显示加载更多功能

我有一个加载更多功能的代码，可以很好地用于列表项

现在，我尝试在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();
        }
    });
});

选择标记的完整代码

---

谁能告诉我如何实现这一功能吗首先，ID必须是唯一的。将它们更改为类或使用不同的ID

其次，一个容器可以包含以下内容，从而避免使用div容器：

允许的内容：文本，可能带有转义字符，如é

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

单击事件处理程序不能附加到选项，而是附加到选择

尽量避免全局变量：它们会造成混乱，从长远来看，您将难以测试和修复代码

$'myList.sec:lt3'。切换类别'sec'； $'myList'。单击，函数e{ 如果此.selectedOptions[0].classList.包含“loadMore”{ $'myList'.val'0'； $'myList.sec:lt5'。切换类'sec'； 如果$'myList.sec'.length==0{ $'myList.loadMore'。隐藏； } } }; 秒{ 显示：无； } .loadMore{ 颜色：绿色； 光标：指针； } 请选择 1. 2. 3. 4. 5. 6. 7. 8. 9 10 11 12 13 14 15 加载更多

---

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

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

我将单击事件改为选择，而不是不起作用的选项标记的单击事件

如果单击，var x将保持选择框的当前状态。加载更多选项x将被更新

$document.readyfunction{ 变量大小=美元秒大小； var x=0； $'myList'。单击，函数{ 如果$this.val==load{ x+=3；//用于显示下一个3选项 $'.sec:lt'+x+.show；//将使用sec类显示total选项中的x值 ifx>=尺寸{ $'loadMore'。隐藏； } } }; }; .sec{显示：无； } 荷德莫尔{ 颜色：绿色； 光标：指针； } 加载更多：悬停{ 颜色：黑色； } 炫耀的{ 颜色：红色； 光标：指针； 显示：无； } 悬停{ 颜色：黑色； } myList li{显示：无； } 荷德莫尔{ 颜色：绿色； 光标：指针； } 加载更多：悬停{ 颜色：黑色； } 炫耀的{ 颜色：红色； 光标：指针； 显示：无； } 悬停{ 颜色：黑色； } 请选择 1. 2. 3. 4. 5. 6. 7. 8. 9 加载更多

---

如果单击“选择框”中的“了解更多”，则“选择框”的“选择值”是多少？它似乎工作正常，但只要单击“加载更多”，下拉列表就会关闭，你能调查一下吗？这是选择框的默认行为，如果这不是你期望的行为，我想知道你为什么选择选择选择框？它是表单的一部分，我需要将数据发送到后端，因此我认为它可能会起作用，如果有任何其他可能性，请让我知道，然后我将建议使用而不是选择。在表单中添加一个隐藏字段，并在单击BTN组列表时更新值。使用btngroup的好处是，您可以随心所欲地玩。它工作正常，但每当单击“加载更多”按钮时，下拉列表就会关闭，请使用“无法选择”按钮查看它。相反，您可以使用引导插件，如