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

Question

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

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

Answer 1

您可以做的是找到所选索引，选择接近末尾的选项并重新选择所选项目，该项目将出现在列表顶部。这是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
}

​</p>

JSFiddle

Answer 2

尝试这个：

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

如果这是你的意思？