目次
1.はじめに
2.完成コード
3.selectの使い方
4.最後に
5.参考文献
はじめに
だんだんと暖かくなってきて嬉しいですね。
さて、以前業務の中でセレクトボックスを用いる開発に関わらせてもらう機会があり、そこでの学びをここに記したいと思います。
セレクトボックスに表示する項目と保存するデータを分けたい。
生きてればこんなこと三日に一回くらいありますよね。説明します。
railsの超基本だろバーカと思うかもしれませんが最近の気候と同様暖かく見守ってくださいね。
完成コード
先述した通り、やりたいことは以下のような感じ。
「GIFT」を選択すればid=4、「クラスメイト」を選択すればid=7、というように保存したいという状況です。
早速ですが、完成コードはこんな感じ。
<%= form_with model: @hoge, url: hoges_path, do |f| %>
<%= f.select :song_id, [['名もなき詩', 1], ['HANABI', 2], ['口が滑って', 3],・・・['ヒカリノアトリエ', 15]], { include_blank: true }, { class: "hoge" id="js-target-hoge"} %>
<% end %>
検証ツールで中身を見てみると、確かにvalueにidが登録されています。
※なお、form_withについては今回この記事では取り上げないこととします。下記サイトが特にわかりやすかったので参考までに。
selectの基本的な使い方
ということで、何となく察していることとは思いますが、selectの基本的な使い方は以下の通りです。
<%= f.select : 保存先のカラム名, [["選択肢１", "実際にDBに保存させる内容"], ["選択肢２", "実際にDBに保存させる内容"]], {オプション}, {HTMLオプション} %>
第一引数：
この「保存先のカラム名」については、form_withを用いる場合は任意のワードを設定できます。
コントローラ側でどんな名前としてデータを受け取りたいかという観点で命名しちゃってください。
第二引数：
ここでは、selectボックスに表示するデータ、保存するデータを設定します。
配列またはハッシュで書いてあげてください。（上記のコードは配列です。）
第三引数：
ここでは、selectボックスのオプションを指定します。
以下の設定がよく使われるようです。気になる方は他も調べてみてください。
{ include_blank: true } ： selectボックスの先頭に空の選択肢を表示する
第四引数：
ここでは、HTMLに関するオプションを設定します。
主にclassやidをここで指定するみたいです。
CSSやJavaScriptを当てたい時に使いたいですね。
最後に
初学者にとってはこういった、いかにも入門用技術書に書いてそうなことも実際の業務の中で触れると戸惑いますよね。わかります。
ともに頑張りましょう。あとミスチルは最高です。
参考文献
以下のサイトを参考に記事を書かせていただきました。