【Handsontable】別セルの値に応じてドロップダウンリストを連携させる

#概要
県名→市町村名等、前のセルの入力値に応じて後ろのセルのドロップダウンリストを変えたい場合の対応方法を記述する。
以下のコード例で、1列名のメーカー名の値に応じて、2列目の車種名の選択肢が変わる例を紹介する。

#コード例

See the Pen OqMQrw by HK0n (@hk0n) on CodePen.

#コード説明
以下3つの要素を利用している。

• afterChange
• setDataAtCell
• setCellMeta

##afterChange
https://handsontable.com/docs/6.2.2/Hooks.html#event:afterChange
セルのデータが変更された場合のイベント。
"changes"には[["変更された行","変更された列","変更前の値","変更後の値"]]という形でデータが格納されている。
今回は、変更された列が車種(1列目(changes[0][1]=0))の場合に、後述のsetDataAtCellとsetCellMetaを実行する。

##setDataAtCell
https://handsontable.com/docs/6.2.2/Core.html#setDataAtCell
セルのデータが書き換えるためのメソッド。

setDataAtCell("対象の行","対象の列","書き換える値")

コード例では、メーカー名が変わった場合に、車種の値を空白にする処理を入れている。
これが無いと、メーカー名、車種名を入力した後にメーカー名を変更した場合、意図しない組み合わせになってしまう。
(無い場合の例)

##setCellMeta
https://handsontable.com/docs/6.2.2/Core.html#setCellMeta

セルのメタデータを書き換えるためのメソッド。

setCellMeta("対象の行","対象の列","対象のプロパティ名","変更後の値")

コード例では、メーカー名の値に応じて車種のselectOptionsを書き換える処理を行っている。