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

jQuery

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

矢印キー change イベント対応ブラウザの調査

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

jQuery
1.3.2		 jQuery
1.4.2		 jQuery
1.4.3rc2
IE6 ○ × ×
IE7 ○ × ×
IE8 ○ × ×
Firefox 3.6.10 × × ×
Safari 5.02 × × ×
Chrome 6.0.472.63 × × ×
Opera 10.63 ○ ○ ○

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

Demo（jQuery 1.3.2） Demo（jQuery 1.4.2） Demo（jQuery 1.4.3rc2）

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

jQuery exChange 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){
    //処理を記述する
});

Demo（jQuery 1.3.2） Demo（jQuery 1.4.2） Demo（jQuery 1.4.3rc2）

ダウンロード

こちらからどうぞ