【jQuery】 select要素に値を設定した後にchangeイベントを発火させる方法

select要素に以下のようにイベントを設定していたとする。

$('select').on('change', function() {
    // Event code ...
});

このselect要素をユーザーが変更し、値が変わることでchangeイベントが発火するのだが、例えばJavaScript側で以下のように値を設定しても今度はchangeイベントが発火されない。

$('select').val(10);

どうしてもJavaScript側でchangeイベントを発火させたいケースがあり、調べてみるとtriggerという便利なメソッドがあることが分かった。

先ほどのコードにメソッドチェーンでtriggerメソッドを以下のように追加することで、引数に渡したイベントが発火するようになる。

$('select').val(10).trigger('change');