こんにちは！
今回はExpressのpugで都道府県のセレクトボックスを作成する方法について、お伝えしていきたいと思います！
ピュアのJavascriptやReactなどを使用する場合も少し修正すれば使えると思います。
まずは都道府県のマスタテーブルを作成
RDBを使っている場合は以下のようなマスタテーブルを作成します。（全部を書くのは煩わしいので省略させていただきます）
シンプルにカラムはidとnameのみです。
| id | name |
|---|---|
| 1 | 北海道 |
| 2 | 青森県 |
| 3 | 岩手県 |
| 4 | 宮城県 |
| ・・・ | ・・・ |
こちらのテーブルから値を取得して、セレクトボックスを作っていきたいと思います。
テーブルから都道府県リストを取得し、セレクトボックスを作成
//- DBから値を取得し、pugのパラメタに渡す
//- prefectures = [{id: 1, name: 北海道}, {id: 2, name: 青森県}, {id: 3, name: 岩手県}, {id: 4, name: 宮城県}]
select(name='prefecture')
option(value='' hidden)
each prefecture in prefectures
option(value=prefecture.id) #{prefecture.name}
こんな感じのセレクトボックスが作成できます。
あとはデザインを微修正したりすれば、完成です。
以上、お疲れさまでした〜