JavaScriptでselect要素にoptionを追加する方法を現役エンジニアが解説【初心者向け】
初心者向けにJavaScriptでselect要素にoptionを追加する方法について現役エンジニアが解説しています。select要素はプルダウン式のメニューを作成するHTML要素です。document.createElementでoptionタグを作成し、appendChildで要素を追加します。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日 調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名 調査手法:インターネット調査
JavaScriptでselect要素にoptionを追加する方法について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。
また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。
そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。
なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。
今回は、JavaScriptに関する内容だね!
どういう内容でしょうか?
JavaScriptでselect要素にoptionを追加する方法について詳しく説明していくね!
お願いします!
HTMLのselect要素とは
HTMLのselectはformタグ中で、セレクトボックスを作成するタグです。基本的にはプルダウン式のメニューとなっています。
ECサイトで個数を選択するときや、アンケートフォームで何らかの選択をするときなど普段使うウェブサイトでもよく見る要素かと思います。
selectタグは、中にoptionタグを持っており、optionタグが一つ一つの選択肢となっています。formを送信すると選択されたoptionタグのvalueの値がサーバーに送信されるという仕組みです。
Webページを作成する際には、必須の要素なのしっかりと動作を理解しておきましょう。
JavaScriptでselect要素にoptionを追加する方法
Webページを作成する場合には、ユーザーの動作に合わせてoptionを増やしたい機会があるかと思います。その場合は、JavaScriptでoptionタグを作成し選択肢を追加することが可能です。
document.createElementでoptionタグを作成し、appendChildで要素を追加することでoptionの追加が可能になります。ちなみにcreateElementとappendChildは以下のように使用します。
document.createElement("タグの名前") 親要素.appendChild(追加する要素)
実際に書いてみよう
それでは実際に書いてみましょう。まずは、1,2,3を持つセレクトボックスを用意します。
<select name="name" id="sampleSelect"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select>
次に、optionタグを追加するJavaScriptの関数を用意します。
function addOption() { // selectタグを取得する var select = document.getElementById("sampleSelect"); // optionタグを作成する var option = document.createElement("option"); // optionタグのテキストを4に設定する option.text = 4; // optionタグのvalueを4に設定する option.value = 4; // selectタグの子要素にoptionタグを追加する select.appendChild(option); }
この関数を以下のボタンタグにonclickイベントを追加して、起動させます。
<button onclick="addOption()">add option</button>
ボタンをクリックしてみると、最初にはなかった4の選択肢が追加されいてるのがわかると思います。
以上で解説を終わります。
筆者プロフィール
メンター金成さん。
2014年より、某物流会社のシステム開発担当として入社。 未経験ながら、社内システム保守~新規受注システム開発まで携わり、JavaScript Ruby on Rails PostgreSQLなどの経験を積む。現在も、開発案件に携わりながら、日々勉強中。 |
内容分かりやすくて良かったです!
ゆかりちゃんも分からないことがあったら質問してね!
分かりました。ありがとうございます!
TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。
挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。