JavaScript

最終更新日：
公開日：

レシピ

フォーム

セレクトボックス（select要素）の選択状態を解除する

セレクトボックス（select要素）の選択状態をJavaScriptで解除する方法について解説します。

この記事のポイント

  • select要素のselectedIndexプロパティに-1を入れると選択解除できる
  • select要素の先頭のoption要素がプレースホルダーの場合は0を入れて解除する
  • 複数選択できるmultiple属性を持つselect要素は、option要素のselectedプロパティにfalseを入れて選択を解除する

目次

セレクトボックスの選択を解除する

フォームなどのセレクトボックス（select要素）の選択を解除するときは、JavaScriptからselect要素のselectedIndexプロパティに「-1」数値を入れることで設定することができます。

JavaScript コード例

select.selectedIndex = -1;

もしselect要素の先頭のoption要素が「選択してください」などのプレースホルダーになっている場合については「-1」ではなく「0」を入れることで選択解除することができます。

他にも、以下の方法で選択解除することが可能です。

value属性に空文字を入れる

JavaScript コード例

selectInterest.value = '';

こちらも簡潔な方法で、selectedIndexプロパティに「-1」と同等の内容になります。
ただしこちらの方法では任意の数値を設定できないため、先頭のoption要素がプレースホルダーになっている場合に、プレースホルダーを選択した状態にして初期化することはできません。

optionsのselectedに false を入れる

JavaScript コード例

for(const option of selectInterest.options) {
  option.selected = false;
}

select要素はoptionsプロパティを使って子孫要素のoption要素を参照できます。
そして、optionsプロパティの選択状態を持つselectedプロパティにfalse（未選択）を設定することで選択を解除します。

こちらの方法はselectedIndexプロパティに「0」を入れた場合と同等になります。
そのため、先頭のoption要素がプレースホルダーになっている場合はプレースホルダーが選択されている状態になります。

より具体的な例

HTMLコードも使って、もう少し具体亭な使用例を紹介していきます。

今回は下記のようなフォームの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="interest">興味のある分野：</label>
        <select id="select-interest" name="interest">
          <option>選択してください</option>
          <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>
      <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) select要素のHTMLを取得
  const selectInterest = document.getElementById('select-interest');

  // (3) 送信ボタンのHTMLを取得
  const btnSubmit = document.getElementById('btn-submit');

  // (4) 送信ボタンがクリックされたときのイベントリスナー設定
  btnSubmit.addEventListener('click', (e)=>{
    e.preventDefault();

    // この時点の選択状態を出力
    console.log(selectInterest.selectedIndex); // select要素が選択されている場合は 0 以上の数値が出力される

    // (5) セレクトボックスの選択を解除
    selectInterest.selectedIndex = -1;

    // もう一度出力
    console.log(selectInterest.selectedIndex); // -1
  });
});

こちらのコードをブラウザで開いて実行し、送信ボタンをクリックするとフォームのセレクトボックス「興味のある分野」で選択されている値をconsole.logメソッドで出力します。
もしセレクトボックスの「興味のある分野」を変更せずに送信ボタンを押した場合は1つ目のconsole.logメソッドで「0」、2つ目のconsole.logメソッドでは「-1」が出力されます。

もしセレクトボックスの選択を1つ目のoption要素「選択してください」に設定したい場合は(5)の「-1」を「0」にします。

複数選択できるセレクトボックスで選択を解除する

multiple属性を持つ複数選択できるセレクトボックス（select要素）についても、selectedIndexプロパティに「-1」を入れる方法で全ての選択を解除できます。
また、子孫要素のoption要素全てに対してselectedプロパティにfalseを設定して選択を解除する方法もあります。

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="interest">興味のある分野：</label>
        <select id="select-interest" name="interest" multiple>
          <option>選択してください</option>
          <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>
      <input type="submit" id="btn-submit" name="btn-submit" value="送信">
    </form>
  </article>
</body>
</html>

main.js

// (1) ページ読み込み完了時に実行
window.addEventListener('load', ()=>{

  // (2) select要素のHTMLを取得
  const selectInterest = document.getElementById('select-interest');

  // (3) 送信ボタンのHTMLを取得
  const btnSubmit = document.getElementById("btn-submit");

  // (4) 送信ボタンがクリックされたときのイベントリスナー設定
  btnSubmit.addEventListener('click', (e)=>{
    e.preventDefault();

    // (5) セレクトボックスの選択を解除
    selectInterest.selectedIndex = -1;
  });
});

以下のコードでは、別の方法である全てのoption要素のselectedプロパティにfalseを設定して選択を解除します。
(5)の部分でselect要素が持つoption要素を1つずつ取り出し、selectedプロパティにfalseを設定して選択を解除します。

main.js

// (1) ページ読み込み完了時に実行
window.addEventListener('load', ()=>{

  // (2) select要素のHTMLを取得
  const selectInterest = document.getElementById('select-interest');

  // (3) 送信ボタンのHTMLを取得
  const btnSubmit = document.getElementById('btn-submit');

  // (4) 送信ボタンがクリックされたときのイベントリスナー設定
  btnSubmit.addEventListener('click', (e)=>{
    e.preventDefault();

    // (5) セレクトボックスの選択を解除
    for(const option of selectInterest.options) {
      option.selected = false;
    }
  });
});

関連記事

前のページへ 一覧に戻る 次のページへ