セレクトボックスの使い方についてです。<select>、<option>タグの書き方から、JavaScriptでvalue値を取得し、値をajaxでコントローラーに渡す方法までを実装していきます。サイト」作成中の僕が、プログラミングをしている中で気づいたことや学んだことを書いております。CODE」で学んでいることや、ネットで見つけた様々な記事を参考に記事を作成しております。前回の記事(【JavaScript】値に応じて表示させるプログレスバーを簡単に実装する)では、免許試験アプリの「マイページ画面」で、学習進捗のパーセンテージを表示するためプログレスバーを実装しました。ログインしたユーザーが解いた問題の正解・不正解をDBに保存し、マイページに進捗を表示させる流れです。今回は「一問一答」機能を拡張し、問題数や出題範囲を選択して一問一答できる仕様にするため、「セレクトボックス」を用いてJavaScriptで値の取得までできるようにしました。セレクトボックスの使い方はじめに、セレクトボックスが何なのか書きます。いうのも、正直セレクトボックスなんて言葉を今回初めて知ったからです。モーダルウィンドウにしろプログレスバーにしろアコーディオンにしろ、最近になるまで全く知りませんでした。「セレクトボックス」がどんなものか、をまず書きます。「セレクトボックス」をクリックすると、「プルダウンリスト」が現れます。最初見たとき、BootstrapとかjQueryのライブラリの類だと思ってたんですけど、そういうわけではなかったです。HTMLの<select>タグだけで、ブラウザに表示できます。<form>とか<button>とかと同じ感覚です。セレクトボックスとプルダウンの基本コード次、基本のコードになります。value="30">30</option></select><select>タグ・・・セレクトボックス<option>タグ・・・プルダウンリストです。これだけでブラウザで表示されます。想像の10倍簡単でした。セレクトボックスがHTMLのタグだけでできるんだったら、もっとHTMLのタグいろいろあってもいいんじゃないか、って思ってしまうくらい。先ほどの基本コードでボックスを表示したら、次はユーザーが選択したメニューをコンピュータ内部に伝えないといけません。一度先ほどの基本コードを見ます。このvalueに入れた値が「取得される要素」となります。この値をJavaScriptで取得します。);」メソッドを行うと、<option>タグに当てたvalue値を引っ張ってこれます。実際に書いたJSのコード。select_questions},});#ajaxでitimon_ittousコントローラに飛ばし、indexアクションを叩く。#value値を格納した変数をパラメータで飛ばす。CODE】)で実装の流れを載せてます。「はじめる」ボタンが現れます。ターミナルを確認すると、パラメータがちゃんと送られてきてます。これでvalue値をコントローラで使うことができます。params[:select_num]で、@numに文字列の"10"が取得可能です。数値で使う場合は注意が必要で、「params[:select_num].to_i」とする必要があります。その他アレンジセレクトボックス内の初期値について基本的に何もしなければ、一番上に書いたoptionの内容がセレクトボックスに初期値として表示されます。それとは別に、「selected」を使うことで、初期値を設定することも可能です。最初に「10」が出てきます。配列(変数)に入っているデータを一気にプルダウンメニューに表示させることも可能です。%></select>僕の場合「出題範囲を選ぶ」で、免許問題の「分野」を一個ずつプルダウンに入れたかったのでこのように書きました。「@fields」に、Fieldモデルから取得した「分野」データ変数が、配列の状態で入ってます。この場合注意すべきなのは、value値を<option>タグに当てる方法です。%>"」のように、ダブルクォーテーションで囲ったruby文にしないと反応しません。調べた際には、「viewに埋め込む」と表現されてました。基本的にrails開発環境で、rubyからJavaScriptへ変数や値を渡す簡単な方法は2つです。上記の方法(rubyの変数を<%%>で囲い、HTMLに直接書き込んでJSで認識させる)「gon」はコントローラーで生成して直接JavaScriptに渡されるイメージです。今回の場合、ユーザーが「どの問題を何問やりたいか」という情報は、html.erb内に書かれたセレクトボックスのみぞ知る内容なので、わざわざコントローラーを経由させて「gon」を使うより、「viewに埋め込む」をした方がいいのかなと。その結果、どちらも使うことになりました。まとめ今回はセレクトボックスで、ユーザーが選択した値をJavaScriptに渡し、ajaxでコントローラにまで持っていきました。コントローラに持ってこれたはいいものの、問題を表示させるところで少し思うようにならず、また問題点を探しています。ajaxでの通信と表示のタイミングの関係がまだあまりつかめてません。JS内でのajax非同期通信のタイミングと、他の関数の呼び出されるタイミングをもう少し勉強します。コメントをキャンセルメールアドレスが公開されることはありません。コメント名前メールアドレスサイト上に表示された文字を入力してください。CODEのDEMODAYで登壇したので、感想を書いていく。