icon
icon

JavaScriptで選択項目を選択した状態に設定する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptで選択項目を選択した状態に設定する方法について現役エンジニアが解説しています。選択項目を選択した状態にするには、HTMLではselectedを付けます。JavaScriptでも同じですが、要素を取得してから設定します。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

JavaScriptで選択項目を選択した状態に設定する方法について解説します。

実際のコードをもとに解説していきますので、理解を深めていきましょう。

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

 

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

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

 

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptで選択項目を選択した状態に設定する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

select要素、option要素とは

select要素はセレクトボックスを作成する為のタグです。

form要素の中でselect要素を使用することで選択された値をサーバーサイドに送信できます。option要素は、select要素の中で選択肢を作成するタグです。value属性で送信する値を設定でき、またselected属性を設定することであらかじめそのoption要素を選択した状態にできます。

書き方は以下の通りです

<select name='sample' id="sample">
  <option value='1'>1</option>
  <option value='2'>2</option>
  <option value='3'>3</option>
  <option value='4' selected>4</option>
</select>

実行結果は以下の通りです。1234四番目のoption要素にselected属性をつけているので、4がデフォルトで選択された状態になります。

selectオブジェクトとは

select要素をJavaScriptのgetElementやquerySelectorで取得すると、JavaScriptのオブジェクトとして扱うことができます。それによって、valueの値を取得したり、selected属性を追加したり、テキストを書き換えることができるようになります。

[PR] コーディングで副業する方法とは

選択項目を選択した状態に設定する方法

選択項目を選択した状態に設定するには、2つ方法があります。1つは最初の例と同じように、HTMLでselectedと書くことです。もう1つは、JavaScriptを使ってselected属性を追加する方法です。

JavaScriptで書く場合は、以下のように書きます。

var select = document.getElementById("sample");
select.options[1].selected = true;

select要素のoptionsには、select内のoptionが入っています。
0番目から順番にoption要素が入っているので、2番目の値が選択された状態になります。

実際に書いてみよう

それでは実際に書いてみましょう。まずはセレクトボックスを用意します。

<select name="fruits" id="fruits-select">
  <option value="apple">apple</option>
  <option value="orange">orange</option>
  <option value="banana">banana</option>
</select>

次にJavaScriptを書いて、bananaが選択された状態にしてみます。

var select = document.getElementById("fruits-select");
select.options[2].selected = true

実行すれば、bananaが選択された状態になっているはずです。以上で解説を終わります。

筆者プロフィール

メンター金成さん

2014年より、某物流会社のシステム開発担当として入社。

未経験ながら、社内システム保守~新規受注システム開発まで携わり、JavaScript Ruby on Rails PostgreSQLなどの経験を積む。現在も、開発案件に携わりながら、日々勉強中。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。

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