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

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

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

 

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

 

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] コーディングで副業する方法とは

実際に書いてみよう

それでは実際に書いてみましょう。まずは、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講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。