jQuery实现自定义Select下拉展开时定位高亮选中项

没问题，这个需求核心就是让自定义下拉框展开时，自动滚动到已选中的选项位置，和原生select的行为对齐。我给你一套用jQuery实现的方案，你可以直接适配到你的组件里：

先对应你的DOM结构（示例参考） #

假设你的自定义Select结构大概是这样的，你可以根据自己的实际DOM调整选择器：

<div class="custom-select">
  <!-- 触发下拉的按钮 -->
  <div class="select-trigger">当前选中项文本</div>
  <!-- 下拉选项列表：需要设置overflow-y:auto才能滚动 -->
  <ul class="dropdown-list" style="max-height: 200px; overflow-y: auto;">
    <li>选项A</li>
    <li class="selected">选项B（已选中）</li>
    <li>选项C</li>
    <li>选项D</li>
    <!-- 更多选项... -->
  </ul>
</div>

jQuery实现代码 #

// 监听下拉触发按钮的点击事件（如果你的展开逻辑是hover/键盘事件，替换成对应事件即可）
$('.select-trigger').on('click', function() {
  const $dropdown = $(this).siblings('.dropdown-list');
  // 切换下拉列表的显示/隐藏状态
  $dropdown.toggle();

  // 仅当下拉列表展开（可见）时执行定位逻辑
  if ($dropdown.is(':visible')) {
    // 找到带有选中标记的li元素（这里用.selected类，你可以改成自己的标识，比如data-selected属性）
    const $selectedItem = $dropdown.find('.selected');
    
    // 确保存在选中项时才执行滚动
    if ($selectedItem.length > 0) {
      // 计算滚动位置：让选中项尽量居中显示，和原生select体验一致
      const dropdownHeight = $dropdown.height();
      const itemHeight = $selectedItem.height();
      // 选中项相对容器的偏移量 + 当前滚动位置 - 容器半高与项半高的差值
      const targetScrollTop = $selectedItem.position().top + $dropdown.scrollTop() - (dropdownHeight / 2 - itemHeight / 2);

      // 平滑滚动到目标位置（不需要平滑的话，直接用$dropdown.scrollTop(targetScrollTop)）
      $dropdown.animate({
        scrollTop: targetScrollTop
      }, 200);
    }
  }
});

关键逻辑说明 #

1. 选中项定位：通过你标记选中状态的类/属性找到目标元素，比如用data-selected="true"的话，把find('.selected')改成find('[data-selected="true"]')即可。
2. 滚动位置计算：这里的计算是为了让选中项在下拉容器中居中显示，和原生select行为完全匹配；如果只需要让选中项滚动到容器顶部，直接用$selectedItem.position().top + $dropdown.scrollTop()就行。
3. 平滑滚动：用animate实现过渡效果，和原生select的滚动体验一致，不需要的话可以直接设置scrollTop值。

注意事项 #

• 确保下拉列表容器（比如.dropdown-list）设置了max-height和overflow-y: auto，这样才会出现滚动条。
• 如果选中项是动态更新的，要保证每次选中后都正确给对应li添加/移除选中标识（比如.selected类）。
• 如果你的下拉展开逻辑不是点击触发，替换成对应的监听事件即可。

内容的提问来源于stack exchange，提问作者uneeb meer