0

基本的なリストを持つ選択要素を作成しようとしています。ユーザーがオプションにカーソルを合わせると、展開してより完全なリストが表示されます。

css を使用して非表示にしたいすべての値を非表示にすることから始めましたが、これでは選択ドロップダウンの高さが調整されなかったため、多くの空白が残っていました。

次に、2 つの選択を試みました。1 つは縮小されたリスト、もう 1 つは完全なリスト (非表示) です。次に、ユーザーが「その他」のオプトグループにカーソルを合わせたときに、javascript を使用して完全なリストから縮小されたリストにオプションをコピーしました。このコードを以下に示します。

HTML:

<select id="Title">
     <option value="">Select...</option>
     <option value="MR">Mr</option>
     <option value="MISS">Miss</option>
     <option value="MRS">Mrs</option>
     <optgroup label="Other">Other</optgroup>
</select>

<select id="FullTitle" style="display:none">
     <option value="">Select...</option>
     <option value="MR">Mr</option>
     <option value="MISS">Miss</option>
     <option value="MRS">Mrs</option>
     <option value="MS">Ms</option>
     <option value="DR">Doctor</option>         
</select>

Javascript:

<script type="text/javascript">
            $('select').find('optgroup').hover(
              function () { 
                var parent = $(this).parent()
                var selected = parent.find('option:selected').val()
                var id = "#Full" + parent.attr('id')                
                parent.html($(id).html())
                parent.find('option[value="'+ selected +'"]').attr('selected', 'selected')
              })
        </script>

これは firefox では問題なく動作しますが、IE または Chrome では動作しません。理由はわかりません。

なぜこれが機能しないのか、または私の問題に対するより良いアプローチを誰かが知っているのだろうかと思っていましたか?

4

1 に答える 1

1

IE と Chrome のオプションでは、ホバー イベントが発生しません。これを実行できる可能性のあるスクリプトがいくつかあります。このサイトの他の投稿も見ました。

jqueryホバーイベントは、Google Chromeの選択オプションタグでは機能しませんか?

私が見たところ、これを div/ul に変換し、css/jquery を使用して選択リストのように見せるのが最善の方法です。

于 2013-01-07T15:53:40.883 に答える