如何在select下拉选项中实现点击加载更多功能

首先需要修正你原有代码的语法问题：原生<select>的<option>标签内部仅支持纯文本内容，不能嵌套<div>这类块级元素，否则会被浏览器自动解析为异常结构。

核心实现逻辑 #

• 初始状态下给需要后续加载的选项加上hidden属性隐藏，仅展示提示项、1-5的可见选项、「Load more」触发选项
• 监听下拉框的change事件，当用户选中「Load more」项时，移除所有待加载选项的hidden属性，同时删除「Load more」触发项（全量加载完成后不再展示触发入口）
• 加载完成后可重置选中状态到默认提示项，方便用户直接选择新加载的选项

完整可运行代码 #

<!-- 修正后的下拉框结构 -->
<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 value="4">4</option>
  <option value="5">5</option>
  <!-- 初始隐藏待加载的选项 -->
  <option value="6" hidden>6</option>
  <option value="7" hidden>7</option>
  <option value="8" hidden>8</option>
  <option value="9" hidden>9</option>
  <option value="load">Load more</option>
</select>

<script>
// 原生JS实现交互逻辑，无需引入第三方库
const selectDom = document.getElementById('myList');
selectDom.addEventListener('change', function() {
  if (this.value === 'load') {
    // 展示所有隐藏的选项
    this.querySelectorAll('option[hidden]').forEach(opt => {
      opt.hidden = false;
    })
    // 移除加载更多触发项
    this.querySelector('option[value="load"]').remove();
    // 重置选中状态到默认提示项
    this.value = '';
  }
})
</script>

如果需要对接真实分页接口，只需要在判断到选中load项的逻辑里，先发起接口请求拿到下一页的选项数据，将新生成的<option>节点插入到「Load more」选项之前即可，判断到是最后一页时再移除「Load more」项，逻辑可以直接复用。

内容的提问来源于stack exchange，提问作者Happy Arif