Chrome中多选列表上的jQuery设置prop（“selected”，true）仅适用一次

Question

当尝试将选择列表选项设置为选中以将选择列表滚动到该选项时，它适用于除 Chrome 之外的所有浏览器。在 Chrome 中它只工作一次，但连续的时间在 Chrome 中不起作用。如何确保在选择列表中设置选项的 selected 属性会将该选项滚动到视图中？

这是我的问题的一个例子 - http://jsfiddle.net/Z2rQG/

我用来在列表中选择一个选项以滚动查看的代码如下：

(function ($) {
    $.fn.scrollToOption = function (option) {
        var _option = $(option, this);
        // if option is in list
        if(_option) {
            // store the selection state
            var isSelected = _option.is(":selected");

            _option.prop("selected", true); // scroll to the option
            _option.prop("selected", isSelected);  // restore the selection state
        }
        return this;
    };
})(jQuery); 

编辑：我也尝试过scrollTo jQuery 插件，它在Chrome 中效果不佳。这是一个例子 - http://jsfiddle.net/kavun/TW4XK/

编辑：这是我正在尝试做的更清晰的示例。从选择列表中选择两个选项，然后将列表滚动到最后选择的选项。这适用于除 Chrome 和 Safari 之外的所有浏览器。在 Chrome 中，第一个选择滚动到选项，但第二个 $('#select option[value=""].prop('selected', true); 不滚动列表 - http://jsfiddle.net/kavun/uhnZH/

Answer 1

如果您的目标只是滚动到下拉列表中的某个值，您可以简单地使用valas demonstrated in this updated fiddle：

$('#selectList').val(51);

这适用于任何浏览器。

如果您尝试根据下拉菜单中的值滚动到页面上的某个元素，您必须提供一个示例，让我们更接近您想要的内容，以便我们解决该特定场景.

Answer 2

浏览器行为在选择多个选项时，滚动到哪个选项会滚动到哪个选项。但是，使用其selected 属性选择选项并设置<select> 元素的selectedIndex 属性似乎可以确保选择在所有主要浏览器中滚动到正确的位置。使用它，您可以获得正确的垂直滚动，选择您想要的选项，然后手动滚动选择。

Opera 似乎不完全支持 scrollTop 选择元素，因此该解决方案在 Opera 中不起作用。

演示：http://jsfiddle.net/uhnZH/10/

代码：

function selectAndScrollToOption(select, option) {
    $select = $(select);

    // Store the currently selected options
    var $selectedOptions = $select.find("option:selected");

    // Select the new option using its selected property and selectedIndex.
    // This seems to make the select scroll to the desired place in all major
    // browsers
    option.selected = true; // Required for old IE
    select.selectedIndex = option.index;

    // Measure the vertical scrolling
    var scrollTop = $select.scrollTop();

    // Re-select the original options
    $selectedOptions.prop("selected", true);

    // Scroll to the correct place
    $select.scrollTop(scrollTop);
}