5

選択リストをそのオプションにスクロールするために選択リストオプションを選択に設定しようとすると、Chromeを除くすべてのブラウザで機能します。Chromeでは1回は機能しますが、それ以降は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);

編集： Chromeではうまく機能しないscrollTojQueryプラグインも試しました。ここに例があります-http://jsfiddle.net/kavun/TW4XK/

編集：これは私がやろうとしていることのより明確な例です。選択リストから2つのオプションを選択し、最後に選択したオプションまでリストをスクロールします。これは、ChromeとSafariを除くすべてのブラウザで機能します。Chromeでは、最初の選択はオプションまでスクロールしますが、2番目の選択$('#select option[value=""].prop('selected', true); はリストをスクロールしません-http ://jsfiddle.net/kavun/uhnZH/

4

2 に答える 2

14

複数のオプションが選択されている場合、どのオプションがスクロールされて表示されるかに関して、ブラウザの動作に一貫性がありません。ただし、そのプロパティを使用してオプションを選択し、要素のプロパティを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 に答える