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

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

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

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

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

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

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(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] JavaScript・jQueryで挫折しない学習方法を動画で公開中

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

選択項目を選択した状態に設定するには、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を使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

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

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