使 Select 下拉框中选择的选项始终显示在顶部。

Question

我正在使用的选择框有4个顶级选项，每个选项下面都有一个选项列表。所选的选项出现在列表底部，这意味着用户仍然需要向上滚动才能看到子选项。

我的问题是，如何使“已选”选项置于顶部？也就是说，整个选择框都滚动，以便它出现在顶部？

- user1782730

---

请参考以下链接：https://dev59.com/HXM_5IYBdhLWcg3wq1GF 和 https://dev59.com/cGs05IYBdhLWcg3wGuOd - riti

我认为这取决于浏览器，即浏览器决定在哪个滚动级别上显示选择框下拉菜单。 - redShadow

这是一个多选的选择元素吗？ - epascarello

Answer 1

试试这个：

$('select option:selected').before($('select option:first'));

如果这是您的意思？

- Rick Kuipers

---

海报不想移动实际选择的选项，只是希望滚动条不同。这将破坏原帖的顺序。 - epascarello

我的问题是，我该如何使“selected”选项位于顶部？即整个选择框已滚动，以便它出现在顶部？这肯定是一个含糊不清的问题。 - A. Wolff

Answer 2

你可以做的是找到选中的索引，选择靠近末尾的一个选项，然后重新选择选中的项目，这样该项目将出现在列表的顶部。这种方法有点取巧，但是有效。这种方法仅适用于单选，如果是多选，则需要重新选择所有选项。

var sel = ​document.getElementById("yourSelect");
var optsLen = sel.options.length;
var selIndex = sel.selectedIndex;
var size = sel.size;
if (selIndex>=size) {
    var newIndex = selIndex+size+1;
    if (newIndex>optsLen) {
        newIndex = optsLen;
    }
    sel.selectedIndex = newIndex;
    setTimeout(function(){sel.selectedIndex = selIndex},1); //slight delay so line above runs
}

​

JSFiddle

{{链接1：JSFiddle}}

- epascarello