JavaScriptでselect要素を操作してみよう!

JavaScriptとHTMLで入力フォームを構築する際に避けては通れないのが、セレクトボックスです。

住所を入力する際の都道府県の項目、生年月日を入力する際の月日の項目など、セレクトボックスを設置すべき入力項目が数多く存在します。加えて、セレクトボックスに設定された値に応じて、何らかの処理を行わなければならないことも往々にしてあります。

今回は、入力フォームの基本的要素であるセレクトボックスを、JavaScriptから操作する方法について詳しく解説していきます。今回解説する内容は、入力フォームを構築するうえで基本となるものなので、いち早く理解しておきましょう。


レバテックフリーランス … 業界最大級の案件数業界トップクラスの高単価報酬を誇る最大手のサービスです。実績豊富なコーディネーターが丁寧な対応をしてくれるため、案件の無理な提案はありません。フリーランスで生きていくためにはまず登録しておきましょう。
MidWorks … フリーランス賠償責任保障生命保険の折半など、フリーランスでありながらも正社員並みの保障を受けられるのが特徴です。また、経験豊富なキャリアコンサルタントによる手厚いサポートも受けられるため、安定したフリーランス生活を送りたい方には特におすすめのサービスです。
ポテパンフリーランス … IT業界・技術に詳しいコンサルタントが担当してくれるため、こちらの要望をきちんと理解した上で案件を紹介してくれます。また、案件情報のみならず、フリーランスのイロハについても教えてくれるため、フリーランスとして初めて活動される方には特におすすめのサービスです。

レバテックキャリア … ITエンジニアが利用したい転職エージェントNo.1にも選ばれており、年収600万円以上のハイクラス求人を5,000件以上も保有しています。エンジニアが転職を考えた時にまず初めに登録しておくべきサービスです。
Tech Stars Agent … Tech Stars Agentでは、担当エージェントが全員エンジニア出身のため、スキルやキャリアを見据えたきめ細かな転職支援が受けられます。運営元の株式会社Branding Engineerは、独立支援サービス「MidWorks」も展開しているため、独立を視野に入れたサポートも受けられます
転職ドラフト … 年収UP率93.8%/平均年収UP額126万円と圧倒的な年収UP率を誇るイベント型のエンジニア向け 転職サービスです。毎月1回開催され、厳選された優良IT/Web系企業約150社からダイレクトスカウトを受け取ることができます。年収アップを目指す方は登録必須です。


セレクトボックスとは?

最初に、セレクトボックスの機能について説明してきます。セレクトボックスは、複数の選択肢の中から、1つ(または複数個)の項目を選択するための部品です。

セレクトボックスのサンプルコードを以下に示します。

<select id="chinese-food-1">
  <option value="北京ダック">北京ダック</option>
  <option value="青椒肉絲">青椒肉絲</option>
  <option value="餃子">餃子</option>
  <option value="麻婆豆腐">麻婆豆腐</option>
  <option value="小籠包">小籠包</option>
  <option value="ワンタン麺">ワンタン麺</option>
</select>

セレクトボックスを実装するには、セレクトボックス全体を表現する<select>タグと、セレクトボックスに設定する選択肢を表現する<option>タグを組み合わせて記述します。

ブラウザで開くと、ウェブ上でよく見かける入力フォームが表示されることが分かります。

<select>タグでは、multiple属性を追加することで複数個選択することが可能です。

試しに、id属性の横に「multiple」を追加して再表示してみましょう。すると、前回表示したものと異なる形で入力フォームが表示されることが分かります。

単純にクリックするだけでは1つしか選択できませんが、CtrlキーやShiftキーを押しながらクリックすると、複数個選択できるようになります。

Javascriptでvalueを取得する

ここからは、セレクトボックスに設定した値をJavaScriptで取得する方法について説明していきます。

例として、セレクトボックスで料理名を選び「注文する」ボタンを押下すると、「(選択した料理名)を注文しました。」と文字列出力するウェブページを考えてみましょう。

単一選択式の場合

まずは、multiple属性を指定しない単一選択式の場合について考えます。サンプルコードは以下の通りです。

<select id="chinese-food-1">
  <option value="北京ダック">北京ダック</option>
  <option value="青椒肉絲">青椒肉絲</option>
  <option value="餃子">餃子</option>
  <option value="麻婆豆腐">麻婆豆腐</option>
  <option value="小籠包">小籠包</option>
  <option value="ワンタン麺">ワンタン麺</option>
</select>

<button onclick="return display();">注文する</button>

<p id="order-string"></p>

<script>
function display() {
  // 選択されているvalueを取得
  let selected_value = document.getElementById('chinese-food-1').value;

  document.getElementById('order-string').innerHTML = selected_value + "を注文しました。";
}
</script>

セレクトボックスで選択した値は、selectタグのvalueの中に保管されています(display()関数内2行目)。その値を取得するため、最初はgetElementById()メソッドで対象のセレクトボックスを取得します。つまり、idがchinese-food-1の<select>タグです。

次にvalueプロパティを参照して値を取得します。今回は、<option>タグのvalueに料理名を設定しているため、後は文字列を表示するために<p>タグに文字列を設定する処理を記述するだけです(display()関数内4行目)。

複数選択式の場合

次に、muitiple属性を付与した複数選択式の場合を考えます。select要素を取得した際に参照できるvalueは、複数選択式であっても1つの値のみ設定されています。したがって、単一選択式と同じような処理を実装できません。

複数選択式の場合は、select要素内で定義されている各option要素が選択されているか否かを判定することで処理を実装していきます。

サンプルコードを以下に示します。なお、script要素以外の部分は単一選択式のときと変わらないため省略していることに注意してください。

function display() {
  // select要素内の全option要素を取得
  let options = document.getElementById('chinese-food-1').options;
  // 選択された料理名を格納する配列
  let order_foods_str = new Array();

  for (let option of options) {
    // 各option要素の選択状態を判定
    // true(選択状態)の場合、料理名を配列に格納
    if(option.selected) order_foods_str.push(option.value);
  }

  // join()メソッドで料理名をカンマでつなげて出力
  document.getElementById('order-string').innerHTML = order_foods_str.join(",") + "を注文しました。";
}

getElementById()メソッドで対象のセレクトボックスを取得する部分は同じですが、複数選択式の場合はoptionsを取得します(3行目)。

optionsは、対象のセレクトボックス内で定義されたoption要素のコレクションです。取得したコレクションに対して、各要素の選択状態を判定する処理をfor文などの反復処理で実装していきます。

オプション要素が選択されているか否かは、selectedにBoolean値で設定されています。trueであれば選択されている状態、falseであれば選択されていない状態です。今回はtrue、つまり選択されている状態のときに料理名を配列に格納しています(10行目)。

配列で格納している理由は、後に文字列出力する際にカンマで区切って表示するためです。(14行目)JavaScriptでは、配列に格納されている文字列をカンマ区切りで文字列化する、join()メソッドが用意されています。

Javascriptでvalueを設定する

次は、JavaScriptからセレクトボックスに値を設定する処理の実装方法を解説していきます。例として、ページ読み込み時に特定の料理名が選択状態になる処理を考えてみましょう。

単一選択式の場合

はじめに、単一選択式の場合の実装方法です。以下のサンプルコードをご覧ください。

<select id="french-food-1">
  <option value="テリーヌ">テリーヌ</option>
  <option value="コンフィ">コンフィ</option>
  <option value="キッシュロレーヌ">キッシュロレーヌ</option>
  <option value="ラタトゥイユ">ラタトゥイユ</option>
  <option value="マリネ">マリネ</option>
  <option value="クロックムッシュ">クロックムッシュ</option>
</select>

<script>
// ページ読み込み時に実行する関数
window.onload = function() {
  let selected_food = "ラタトゥイユ"; // 選択状態にする料理名
  let options = document.getElementById('french-food-1').options;

  for (let option of options) {
    if(option.value === selected_food) option.selected = true;
  }
}
</script>

上記サンプルコードを実行すると、セレクトボックスに「ラタトゥイユ」が設定されていることが分かります。ページ読み込み時にJavaScriptの処理を実行したい場合は、window.onloadに関数を設定する必要があります(script要素内2行目)。

セレクトボックスに値を設定する際は、設定したい料理名に対応する<option>タグを選択状態にすれば良いので、option.selectedtrueを設定しましょう(7行目)。

複数選択式の場合

複数選択式の場合も、単一選択式と同じく<option>タグのselectedにtrueを設定することで、セレクトボックスに値を設定します。サンプルコードは、以下の通りです(script要素以外は省略)。

// ページ読み込み時に実行する関数
window.onload = function() {
  // 選択状態にする料理名
  let selected_foods = [
    "テリーヌ",
    "キッシュロレーヌ",
    "マリネ",
    "クロックムッシュ"
  ];
  let options = document.getElementById('french-food-1').options;

  for (let option of options) {
    if(selected_foods.includes(option.value)) option.selected = true;
  }
}

あらかじめ料理名を複数格納した配列を使って、料理名が含まれているかの判定処理を実装している部分(12行目)以外は、単一選択式と変わりありません。

お仕事の途中ですが、少し一休みして、転職独立について考えてみませんか🙌?

現役エンジニアが選ぶおすすめの転職エージェント11選【成功談・失敗談もあります】

レバテックフリーランスの評判ってどう?【現役エンジニアが徹底解説します】

MidWorks(ミッドワークス)の評判ってどう?【現役エンジニアが徹底解説します】

日々の業務に追われて自分を見失わないよう、
定期的にキャリアを振り返るようにしておきましょう🤲

最後に

さて、ここまでJavascriptでセレクトボックスを扱う方法について解説してきましたがいかがでしたか?

Webアプリケーションを開発する上で避けては通れない「セレクトボックス」ですが、HTML上での扱い方は一般的である一方で、Javascriptで扱う方法は意外と知られていません。

Javascriptでセレクトボックスを扱えるようになると、それだけで開発の幅がグンと広がりますので、ぜひ今回の記事でマスターしておいてくださいね。

このブログを通じて少しでも「傍(はた)を楽(らく)にする」ことができていれば嬉しく思います。

最後まで読んで頂きありがとうございました。