3

ユーザーが選択ボックスからオプションを選択したときに何かをしようとしています - できるだけ簡単ですか? JQuery 1.3.1 を使用して、選択ボックスの ID を持つクリック ハンドラーを登録しています。Chrome と Safari を使用してテストし、機能しないことが判明するまでは、すべて問題ありませんでした。

  1. Firefox 3.05 - はい
  2. IE 7.0.5730.13 - はい
  3. IE6Eolas - はい
  4. Sarafi 3.2.1 - いいえ
  5. クロム 1.0.154.43 - いいえ

以下のコードを参照してください。

<html>
<head>
    <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
    <script language="javascript">
    $(document).ready(function(){
        $('#myoption').click(function() { alert('Select Dropdown was clicked: '+ $('#myoption').val()); });
    });     
    </script>
</head>
<body>
    <select id="myoption">
    <option value="A">A</option>
    <option value="B">B</option>
    </select>
</body>
</html>

これが機能するために私が何をすべきか知っている人はいますか? アラートは最終的にトリガーされますが、選択ボックスをダブルクリックした後にのみ発生しますか?

4

2 に答える 2

5

問題が見つかりました。選択ボックスの場合、「クリック」イベントではなく「変更」イベントのハンドラーを登録する必要があります。Firefox と IE がクリック イベントで動作するのは奇妙です。

要約すると、次のコードはすべてのブラウザーで機能します。

<html>
<head>
    <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
    <script language="javascript">
    $(document).ready(function(){
        $('#myoption').change(function() { alert('Select Dropdown was clicked: '+ $('#myoption').val()); });
    });         
    </script>
</head>
<body>
    <select id="myoption">
    <option value="A">A</option>
    <option value="B">B</option>
    </select>
</body>
</html>
于 2009-01-23T08:35:09.997 に答える
1

Safari と Chrome はどちらも Webkit ベースのブラウザーです。Webkit は、ドロップダウン自体を実装する代わりに、OS のネイティブ ドロップダウン要素を使用します。残念ながら、ネイティブ ドロップダウンはクリック イベントをサポートしていません。同じ理由で、オプション要素やその他の巧妙なトリックの CSS もサポートしていません。

これらを機能させるための唯一のクロスブラウザーの方法は、 <ul> と多くの JavaScript を使用して手動で実装することです。

于 2010-06-21T17:40:11.773 に答える