最終更新日：
公開日：
レシピ
フォーム
セレクトボックス（select要素）を選択状態にする
セレクトボックス（select要素）の選択状態をJavaScriptで設定する方法について解説します。
この記事のポイント
- select要素のselectedIndexプロパティに数値を入れて選択状態にする
- 複数選択できるmultiple属性を持つselect要素は、option要素のselectedプロパティにtrueを入れて選択状態にする
目次
セレクトボックスを選択状態にする
フォームなどのセレクトボックス（select要素）の選択状態は、JavaScriptからselect要素のselectedIndexプロパティに数値を入れることで設定することができます。
JavaScript コード例
select.selectedIndex = 3;selectedIndexプロパティに設定できる値は、select要素内のoption要素の数に準じます。
値は0を先頭とし、1つ目を選択したい場合は0、4つ目を選択したいときは3を設定します。
また、-1を選択した場合は選択無し（選択解除）の状態になります。
もう少し具体的な例を紹介していきます。
今回は下記のようなフォームのHTMLから「main.js」というJavaScriptを読み込むことを想定し、main.jsよりフォームのselect要素を取得し、selectedIndexプロパティに値を設定してみましょう。
HTML コード例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GRAYCODE JavaScript</title>
<script src="main.js"></script>
</head>
<body>
<article id="content1">
<h1>JavaScriptレシピ</h1>
<form method="post" action="">
<div>
<label for="select-age">年齢：</label>
<select id="select-age" name="age">
<option value="1">〜19歳</option>
<option value="2">20歳〜29歳</option>
<option value="3">30歳〜39歳</option>
<option value="4">40歳〜49歳</option>
<option value="5">50歳〜59歳</option>
<option value="6">60歳〜</option>
</select>
</div>
<input type="submit" id="btn-submit" name="btn-submit" value="送信">
</form>
</article>
</body>
</html>続いて、main.jsは下記のようなコードになります。
(2)の赤字の箇所で、select要素のselectedIndexプロパティに「2」を設定し、「30歳〜39歳」が選択された状態にしています。
main.js
// (1) ページ読み込み完了時に実行
window.addEventListener('load', ()=>{
// (2) 年齢のセレクトボックスに選択状態を設定
const selectAge = document.getElementById('select-age');
selectAge.selectedIndex = 2;
// (3) 送信ボタンのHTMLを取得
const btnSubmit = document.getElementById('btn-submit');
// (4) 送信ボタンがクリックされたときのイベントリスナー設定
btnSubmit.addEventListener('click', (e)=>{
e.preventDefault();
// (5) セレクトボックスで選択されている値を出力
console.log(selectAge.selectedIndex); 選択を変更していなければ 2 が出力される
});
});こちらのコードをブラウザで開いて実行し、送信ボタンをクリックするとフォームのセレクトボックスである「年齢」で選択された値をconsole.logメソッドで出力します。
もしフォームの年齢を変更せずに送信ボタンを押した場合、(2)で選択状態にしている2が出力されます。
複数選択できるセレクトボックスで選択状態を設定する
multiple属性を持つ複数選択できるセレクトボックス（select要素）では、複数選択状態にするときはselect要素のselectedIndexプロパティではなく、子孫要素のoption要素が持つselectedプロパティにtrueを設定して選択状態にします。
selectedIndexプロパティは1つしか値を設定できないため、複数選択した状態に設定することはできません。
HTML コード例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GRAYCODE JavaScript</title>
<script src="main.js"></script>
</head>
<body>
<article id="content1">
<h1>JavaScriptレシピ</h1>
<form method="post" action="">
<div>
<label for="your_name">氏名：</label><input type="text" id="your_name" name="your_name" value="" placeholder="氏名を入力してください">
</div>
<div>
<label for="select-interest">興味のある分野：</label>
<select id="select-interest" name="interest" multiple>
<option value="1">デザイン</option>
<option value="2">コーディング</option>
<option value="3">フロントエンド</option>
<option value="4">バックエンド</option>
<option value="5">マーケティング</option>
<option value="6">企画</option>
</select>
</div>
<div>
<label for="privacy_policy"><input type="checkbox" id="privacy_policy" name="privacy_policy" value="1">個人情報保護方針に同意する</label>
</div>
<input type="submit" id="btn-submit" name="btn-submit" value="送信">
</form>
</article>
</body>
</html>以下のコードでは、(2)の部分でindexプロパティが1と3のみ（2つ目と4つ目のoption要素）選択状態にしています。
main.js
// (1) ページ読み込み完了時に実行
window.addEventListener('load', ()=>{
// (2) 年齢の選択状態を設定
const selectInterest = document.getElementById('select-interest');
for(const option of selectInterest.options) {
if(option.index === 1 || option.index === 3) option.selected = true;
};
// (3) 送信ボタンのHTMLを取得
const btnSubmit = document.getElementById('btn-submit');
// (4) 送信ボタンがクリックされたときのイベントリスナー設定
btnSubmit.addEventListener('click', (e)=>{
e.preventDefault();
// (5) セレクトボックスで選択されている値を出力
for(const option of selectInterest.selectedOptions) {
console.log(option.index); 選択状態が変更されていなければ 1 と 3 を表示
}
});
});