javascript selectbox内のoptionの数を取得する

作成日 2023.01.28
javascript
javascript

javascriptで、selectbox内のoptionの数を取得するサンプルコードを記述してます。対象のselectboxに「length」を使用することで可能です。また「length」に任意の数値を指定することでoptionの数を変更することもできます。

1. 環境
2. optionの数を取得
3. 「length」を指定
4. サンプルコード

環境

OS windows11 pro 64bit
ブラウザ chrome 109.0.5414.75

Javascript サンプル集はこちら

optionの数を取得

optionの数を取得するには、「length」を使用します。

要素.value; // optionの数

実際に取得してみます。

<select id="foo">
  <option selected>select menu</option>
  <option value="One">One</option>
  <option value="Two">Two</option>
  <option value="Three">Three</option>
</select>

<script>

let num = document.getElementById( "foo" ).length;

console.log(num); // 4

</script>

「length」を指定

「length」に値を指定すると「option」の数を操作することができます。

<select id="foo">
  <option selected>select menu</option>
  <option value="One">One</option>
  <option value="Two">Two</option>
  <option value="Three">Three</option>
</select>

<script>

document.getElementById( "foo" ).length = 3;

</script>

実行結果

元の「option」の数より大きい値を指定した場合は、空の値をもつoptionが生成されます。

<select id="foo">
  <option selected>select menu</option>
  <option value="One">One</option>
  <option value="Two">Two</option>
  <option value="Three">Three</option>
</select>

<script>

document.getElementById( "foo" ).length = 7;

</script>

実行結果

サンプルコード

以下は、
selectボックスからoptionの数を取得して、画面にその値を表示するだけの
サンプルコードとなります。

※cssには「bootstrap material」を使用してます。

アロー関数の使い方

document.getElementByIdの省略して記述する

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>mebeeサンプル</title>
  <!-- MDB -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.2.0/mdb.min.css" rel="stylesheet" />
</head>

<body>
  <div class="container text-center w-25" style="margin-top:150px">

    <h2><span class="badge badge-success">実行結果</span></h2>
    <select id="foo" class="browser-default custom-select">
      <option selected>select menu</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>   

    <button id="btn" type="button" class="btn btn-raised btn-success mt-1">
      実行
    </button>

  </div>

  <script>

    // クリックイベントを登録
    btn.onclick = () => {
      document.getElementsByClassName("badge")[0].textContent = foo.length;
    };

  </script>
</body>

</html>

取得されていることが確認できます。