使选择框中的选定选项始终显示在顶部

Question

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

我的问题是，如何让“选定”选项位于顶部？即，使整个选择框滚动，使其显示在顶部？

Answer 1

试试这个：

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

如果这是你的意思？

Answer 2

您可以做的是找到所选索引，选择最后一个选项并重新选择所选项目，该项目将显示在列表顶部。它是hacky，但有效。这也适用于单选，如果是多个选项，则必须重新选择所有选项。

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