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

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

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

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

 

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

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

 

 

 

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講座を開催しています。

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