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

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

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

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

フリーランス案件を探すならこのエージェント！

運営会社	レバテック株式会社	株式会社Branding Engineer	株式会社Hajimari
対応エリア	東京・神奈川・埼玉・千葉 大阪・兵庫・京都・愛知・福岡	東京・神奈川・埼玉・千葉 大阪・兵庫・京都・奈良・和歌山・滋賀	東京・神奈川・埼玉・千葉 茨城・大阪・兵庫・福岡
案件数	約28,000件	約3,300件	約4,200件
平均単価	68.2万円	72.2万円	–
最高月収	145万円	200万円	176万円
特徴	・高単価な案件が多い ・福利厚生サービスが受けられる ・首都圏の案件が中心	・給与保証制度で安定した収入を得られる ・税務処理のサポートあり ・マージン率は実質20%	・週2/週3の案件が多い ・在宅/リモート案件が多い ・スタートアップ企業やベンチャー企業の案件が多い
紹介企業例	・株式会社Gunosy ・株式会社バンダイナムコホールディングス ・株式会社ユーザベース	・Sansan株式会社 ・株式会社一休 ・株式会社FiNC Technologies など	・クックパッド株式会社 ・株式会社カオナビ ・株式会社Kaizen Platform など
説明記事	説明記事はこちら	説明記事はこちら	説明記事はこちら
公式サイト	公式サイトへ	公式サイトへ	公式サイトへ

転職を考えているならこのエージェント！

運営会社	レバテック株式会社	株式会社Branding Engineer	株式会社リブセンス
対応エリア	東京・神奈川・埼玉・千葉 大阪・兵庫・京都・愛知・福岡	東京・神奈川・埼玉・千葉 大阪・兵庫・京都・奈良・和歌山・滋賀	東京・神奈川・埼玉・千葉 茨城・大阪・兵庫・福岡
案件数	約13,000件	約800件 ※非公開求人が多い	– ※ドラフト制のため、対象外
年齢層	20代：◎ 30代：〇 40代：〇	20代：〇 30代：〇 40代：△	20代：〇 30代：〇 40代：〇
特徴	・エンジニア・デザイナーを専門としている ・カウンセリングに時間をかける ・年収アップ率60％の実績	・IT/Web/ゲーム業界専門の転職エージェント ・業界経験者がキャリアコンサルタントを務める ・丁寧なカウンセリングで入社後の離職率1%以下を実現	・ドラフト制による採用を叶える特殊なサービス ・スキル・経験重視で評価してもらえる ・他エンジニアの入札結果を見ることで 自分の市場価値が分かる
紹介企業例	・サイボウズ株式会社 ・株式会社サイバーエージェント ・Chatwork株式会社 など	・DMM.com ・Money Forward ・SmartHR など	・メルカリ ・ZOZOテクノロジーズ ・freee など
説明記事	説明記事はこちら	説明記事はこちら	説明記事はこちら
公式サイト	公式サイトへ	公式サイトへ	公式サイトへ

セレクトボックスとは？

最初に、セレクトボックスの機能について説明してきます。セレクトボックスは、複数の選択肢の中から、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.selectedにtrueを設定しましょう（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行目）以外は、単一選択式と変わりありません。

最後に

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

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

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

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

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