クリックする代わりにホバー時に選択ボックスのオプションを表示するにはどうすればよいですか?

選択ボックスのオプションを表示するためのホバーリング

提示された問題には、クリック後ではなくホバー時にオプションを表示する選択ボックスの作成が含まれます。提供されるコードは単純な選択ボックスです:

<select name="size">
   <option value="small">Small</option>
    <option value="medium">Medium</option>
    <option value="large">Large</option>
</select> 

ソリューション

提供される jQuery ソリューションは、目的の動作を実現することを目的としています:

$('#selectUl li:not(":first")').addClass('unselected');
$('#selectUl').hover(
    function(){
    $(this).find('li').click(
        function(){
            $('.unselected').removeClass('unselected');
            $(this).siblings('li').addClass('unselected');
            var index = $(this).index();
            $('select option:selected').removeAttr('selected');
            $('select[name=size]')
                .find('option:eq(' + index + ')')
                .attr('selected',true);
        });
    },
    function(){
});

説明

• コードは、最初は「unselected」クラスを追加することにより、最初のオプションを除くすべてのオプションを非表示にします。
• UL の上にマウスを置くと、クリックできるようになります。選択を変更するには、オプションをクリックします。
• オプションをクリックすると、「未選択」クラスが他のすべてから削除され、クリックされたオプションに追加され、表示されたままになります。
• 選択されたオプションのインデックスは次のとおりです。 select 要素を更新し、変更を永続化するために使用されます。

追加機能

ソリューションは以下を含むように拡張されました。

• 更新された選択要素の値を示すアラート。
• 選択およびホバーされたオプションの可視性を向上させるスタイル。
• 他のプロジェクトでの実装を容易にするプラグイン アプローチ。
• 選択ボックスの目的を説明するガイダンス テキスト要素。

以上がクリックする代わりにホバー時に選択ボックスのオプションを表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。