CSS フレームワーク Materialize でセレクトボックスの表示を動的に変更する方法

Materialize(https://materializecss.com/)は、名前のとおり、「マテリアル・デザイン」に特化したCSSフレームワークです。

モバイル向けにも使えて便利なのですが、時々、公式ドキュメントを参照しても分からない設定でつまることもあります。

今回は、セレクトボックスの表示を変更する方法です。
通常でしたら、jQuery で $(“#hoge”).val(select_val); とすれば良いですし、それでフォームを送信しても、指定した値できちんと送られます。
ですが、Materialize を適用すると、実際には元のセレクトボックスは非表示になり、その真上に独自のスタイルが適用されたリストが追加されるという仕組みになっています。

ということで、解決法は以下の通りです。

• .val でセレクトボックスの値を変更する
• 次に .formSelect で Materialize のデザインを再描画する

$("#hoge").val(select_val);
$('#hoge').formSelect();

2018.07.30現在、公式（select.html）には記載がなく、stackOverflow の英語記事から判明しました。
https://stackoverflow.com/questions/30341095/change-value-of-materialize-select-box-by-jquery
ご参考になれば幸いです。