select 要素の change イベントを補正する jQuery exChange Select

先日、select 要素の値を矢印キーで変更してたら jQuery の change イベントが起動しないという事象に遭遇しました。例のごとくまた IE6 固有の問題かと思ってたのですが、念のため調べてみると Opera 以外はほとんどのブラウザで再現してしまいました。

という訳で select 要素で正しく change イベントを起動させる jQuery プラグインを作ってみました。

select 要素の値を矢印キーで変更した場合に、change イベントが正しく起動されるブラウザを、jQuery のバージョン別に調べてみました。結果は以下の通り。

Opera 以外はほぼ壊滅状態でした。何故か IE では jQuery のバージョンが 1.3.2 だとちゃんと動きました。

上記リンクで試せますので、矢印キーで値を変更してみてください。change イベントが行われると変更後の値が select 要素の下部に追加されていきます。

ブラウザの種類、バージョンに関わらず、矢印キー／マウスクリックによる値変更のいずれの場合でも正しく change イベントが起動されるようになります。

jquery.js 、 jquery.exchangeselect.js を読み込みます。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.exchangeselect.js"></script>

適用したい select 要素に対し、exChangeSelect() メソッドを実行します。

$('select.example').exChangeSelect(function(evt){
    //処理を記述する
});

こちらからどうぞ

underwood 2011/02/23 11:49 最近jqueryをグリグリ動かしてたんですが、ちょうど悩んでいた問題が解決しました。ありがとうございました～。v1.5でも問題なく動きました。

cyokodog 2011/02/23 21:00 どうぞー
不明な点等あったらコメントください

スパム対策のためのダミーです。もし見えても何も入力しないでください

画像認証

トラックバック - http://d.hatena.ne.jp/cyokodog/20101015/exchangeselect01

リンク元

October 15, 2010