2012-03-21 22 views
1

ユーザーがマウスを使用して項目を選択するかEnterキーを押す前にSELECT要素の変更を追跡するにはどうすればよいですか?SELECT onChangeイベント

keyUpイベントを聴くことができます。キーボードを使用してリストをナビゲートするユーザーを追跡できます。しかし、より一般的なアプローチがあり、リストの "prefinal"リストの変更を追跡できますか?

+0

あなたはページをリロードするまで存在するローカルのjavascript変数の前の値を格納することができます。 – slash197

答えて

0

Javascriptは、おそらくトリックを行う 'onbeforechange'イベントをサポートしていますが、これはブラウザ間でどの程度広く実装されているのかわかりません。それが十分広くサポートされている場合は、前の値を変更する前に保存してください。それに失敗した場合は、元の値を隠しフィールドまたはJS変数に格納してください。

+1

参照が必要です。 Opera、IE、Chrome、Safari、Firefoxはこのイベントをサポートしていません... –

+0

IE(少なくとも8+以上)はそれをサポートしていますが、私は閉じたIE環境でしか使用しませんでした。 。 – Purpletoucan

+0

私はこれをIE6-9、FF11、Chrome 17、Opera 11.61、Safari 5.1.2でテストしましたが、 'onbeforechange'イベントは存在しません**(テスト済み' .onbeforechange = .. '、' addEventListener 'と' .attachEvent')があります。 –

0

選択項目の上にマウスを移動したときに発生するイベントはありません。

あなたの言ったように、マウスの動きを追跡できます。しかし、ブラウザによって異なるリストがレンダリングされるため、これは難しい作業です。

あなたはしかし、ネイティブが

0

を選択し使用することなく、選択ボックスを自分で作成することができますが、この例のように関数を作成する必要があります -

function example(){ 
jQuery('select#service_billing_state').change(function() { 
//your code here 
}); 
} 

を、あなたがのonblur、のonchangeでこの関数を呼び出す必要があり、 onkey、onfocus ...

2

私はいつもこのためにリスナーをfocus click使っています。

$('select').bind('focus click',function(){ 
//IMACHANGINGMYOPTION!!!!!!!!!! 
    //var val=$(this).val(); 
}); 

は、上記の変更のイベントの前にトリガする必要があります。

$('select').change(function(){ 
//The option has been changed. 
}); 

説明:ユーザーが選択焦点を当てたときに、我々は選択した項目の値を取得しない、と私たちは前にそれを操作することができますonchangeイベントが発生した場合。 clickリスナーが追加されています。セレクタが既にフォーカスされている場合、ユーザーは、実際にオプションを選択して変更をトリガーする前に、をクリックして拡張します。

これは、私たちは前の値を追跡することができますよう、使い方の例です。

http://jsfiddle.net/SUKqS/8/

関連する問題