5

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

这是我的问题的一个例子 - 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/

4

2 回答 2

14

Browser behaviour is inconsistent with regard to which option is scrolled into view when multiple options are selected. 但是，使用其selected属性选择选项并设置元素的selectedIndex属性<select>似乎可以确保选择在所有主要浏览器中滚动到正确的位置。使用它，您可以获得正确的垂直滚动，选择所需的选项，然后手动滚动选择。

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);
}
于 2012-10-08T15:14:04.113 回答
1

如果您的目标只是滚动到下拉列表中的一个值，您可以简单地使用val ，如更新的小提琴中所示：

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

这将适用于任何浏览器。

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

于 2012-10-05T19:38:57.067 回答