HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM Select lengthプロパティとは？使い方をサンプルコード付きで解説

HTML DOM の select length プロパティは、HTML ドキュメント内のドロップダウンリスト（<select> 要素）に含まれる <option> 要素の数を取得するためのプロパティです。選択肢がいくつ登録されているかを JavaScript から動的に確認したい場合に非常に便利です。

構文

length プロパティの基本的な構文は以下のとおりです。

object.length

サンプルコード

それでは、select length プロパティを使って、ドロップダウンリスト内の選択肢の数を画面に表示する具体的な例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
    html{
        height:100%;
    }
    body{
        text-align:center;
        color:#fff;
        background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;
        height:100%;
    }
    p{
        font-weight:700;
        font-size:1.2rem;
    }
    .drop-down{
        width:35%;
        border:2px solid #fff;
        font-weight:bold;
        padding:8px;
    }
    .btn{
        background:#0197F6;
        border:none;
        height:2rem;
        border-radius:2px;
        width:35%;
        margin:2rem auto;
        display:block;
        color:#fff;
        outline:none;
        cursor:pointer;
    }
    .show{
        font-size:1.5rem;
        font-weight:bold;
    }
</style>
</head>
<body>
<h1>DOM Select lengthプロパティ デモ</h1>
<p>好きな科目を選んでください：</p>
<select class='drop-down'>
<option>物理</option>
<option>数学</option>
<option>化学</option>
<option>英語</option>
</select>
<button onclick="showLength()" class="btn">選択肢の数を取得</button>
<div class="show"></div>
<script>
    function showLength() {
        var dropDown = document.querySelector(".drop-down");
        var showMsg = document.querySelector(".show");
        showMsg.innerHTML ="選択肢の数： " + dropDown.length;
    }
</script>
</body>
</html>

実行結果

上記のコードをブラウザで実行すると、次のような画面が表示されます。

HTML DOM Select lengthプロパティとは？使い方をサンプルコード付きで解説

「選択肢の数を取得」ボタンをクリックすると、JavaScript の showLength() 関数が呼び出され、ドロップダウンリストに含まれる <option> 要素の数が画面下部に表示されます。この例では 4 つの科目が選択肢として登録されているため、「選択肢の数： 4」という結果が得られます。

HTML DOM Select lengthプロパティとは？使い方をサンプルコード付きで解説

ポイントまとめ

  • length プロパティは読み取り専用で、<select> 要素内の <option> の総数を数値として返します。
  • document.querySelector() などで取得した select 要素オブジェクトに対して .length を指定するだけで簡単に利用できます。
  • フォームのバリデーションや選択肢の動的な追加・削除処理など、さまざまな場面で活用できます。
  1. HTML DOM フォームの length プロパティとは？使い方とサンプルコードを解説

    HTML DOM の Form オブジェクトが持つ length プロパティは、フォーム内に存在する要素の数を返すために使用されるプロパティです。読み取り専用のため、値を代入して変更することはできません。 構文 Form length プロパティの構文は以下のとおりです。 formObject.length サンプルコード それでは、Form length プロパティの具体的な使用例を見てみましょう。 <!DOCTYPE html> <html> <head> <style> form{ border:2px solid

  2. HTML DOM Storageのlengthプロパティの使い方を解説

    HTML DOM StorageのlengthプロパティとはHTML DOMのlengthプロパティは、ブラウザのストレージオブジェクト内に保存されているアイテム（データ）の数を取得するために使用されます。ストレージオブジェクトには、localStorageオブジェクトとsessionStorageオブジェクトの2種類があります。lengthプロパティは読み取り専用であり、引数は不要です。ストレージに何も保存されていない場合は「0」を返します。構文localStorageオブジェクトの場合localStorage.length;sessionStorageオブジェクトの場合sessionSto