プログラミング フロントエンド

都道府県の入力フォームを作りたい

スポンサーリンク

こんにちは!

今回はExpressのpugで都道府県のセレクトボックスを作成する方法について、お伝えしていきたいと思います!

ピュアのJavascriptやReactなどを使用する場合も少し修正すれば使えると思います。

まずは都道府県のマスタテーブルを作成

RDBを使っている場合は以下のようなマスタテーブルを作成します。(全部を書くのは煩わしいので省略させていただきます)

シンプルにカラムはidとnameのみです。

idname
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}

こんな感じのセレクトボックスが作成できます。
あとはデザインを微修正したりすれば、完成です。

以上、お疲れさまでした〜

スポンサーリンク

-プログラミング, フロントエンド
-,

© 2021 エンジニア×ライフハック Powered by AFFINGER5