JavaScriptでselect要素にoptionを追加する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでselect要素にoptionを追加する方法について現役エンジニアが解説しています。select要素はプルダウン式のメニューを作成するHTML要素です。document.createElementでoptionタグを作成し、appendChildで要素を追加します。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptでselect要素にoptionを追加する方法について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(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(追加する要素)

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

実際に書いてみよう

それでは実際に書いてみましょう。まずは、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を使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。