ホームページ >ウェブフロントエンド >CSSチュートリアル >JavaScript を使用してホバリング可能なセレクト ボックス オプションを作成するにはどうすればよいですか?

JavaScript を使用してホバリング可能なセレクト ボックス オプションを作成するにはどうすればよいですか?

Patricia Arquette
Patricia Arquetteオリジナル
2024-11-01 07:59:01337ブラウズ

How to Create Hoverable Select Box Options with JavaScript?

ホバー可能な選択ボックスのオプション

ここでの質問では、クリックして開くのではなく、フィールドにホバーしたときにオプションの説明が表示される選択ボックスを作成する必要があります。

実装

この機能を実現するために、次のような JavaScript アプローチを利用しました。

$('#selectUl li:not(":first")').addClass('unselected');
// Hide the 'unselected' elements in the ul.

$('#selectUl').hover(
    function(){
    // mouse-over
        $(this).find('li').click(
            function(){
                $('.unselected').removeClass('unselected');
                // removes the 'unselected' style

                $(this).siblings('li').addClass('unselected');
                // adds 'unselected' style to all other li elements

                var index = $(this).index();
                $('select option:selected').removeAttr('selected');
                // deselects the previously-chosen option in the select

                $('select[name=size]')
                    .find('option:eq(' + index + ')')
                    .attr('selected',true);
                // assumes a 1:1 relationship between the li and option elements
            });
    },
    function(){
    // mouseout (or mouseleave, if they're different, I can't remember).
    });

このアプローチでは、選択されていないクラスを利用して最初にすべてを非表示にします。最初のオプションを除くオプション。 ul の上にカーソルを置くと、クリックされていない要素には unselected クラスが与えられ、実質的に消えます。選択した要素は表示されたままになり、その対応する値が基礎となる選択フィールドに反映されます。

以上がJavaScript を使用してホバリング可能なセレクト ボックス オプションを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。