在滚动 html 下拉列表中对齐所选项目

Question

我有一个滚动下拉菜单，当有人打开下拉菜单时，我希望当前选定的元素显示在中心（如果可能的话，也就是 low/high 就够了），而不是浏览器默认的 - 在Firefox，下拉视图在末尾显示所选元素。

Answer 1

遗憾的是，您无法使用默认 select 选项执行此操作。

这个问题已经回答 here。

无论如何，您可以构建自定义 select 或使用自定义插件 select，然后放置下拉列表：

https://select2.org/

http://gregfranko.com/jquery.selectBoxIt.js/

Answer 2

我认为这可能是您可以将所选选项居中而不是所有选项居中所以您可以将选定的那些居中，例如

<!DOCTYPE html>
<html>

<head>
  <title></title>
  <style>
    select {
      width: 400px;
      text-align-last: center;
    }
  </style>
</head>

<body>
  <select name="state" class="ddList">
    <option>Selected</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
    <option>D</option>
  </select>
</body>

</html>

Answer 3

使用一些js重新排序你的选项，你可以将所选值的位置与中间done交换，你就完成了

你可以得到选择的 children 将所选选项放入 var 得到中间的那个 let target = option[Math.floor(childrend.length / 2)]

然后简单的交换位置您可以将其设置为 onchange 或其他

的事件侦听器

在滚动 html 下拉列表中对齐所选项目

Align selected item in scrolling html dropdown

html

css

scroll

alignment