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

HTML DOM selectオブジェクトとは？使い方・プロパティ・メソッドを解説

HTML DOM selectオブジェクトとは

HTML DOMのselectオブジェクトは、HTMLドキュメント内の<select>要素（ドロップダウンリスト）を表すオブジェクトです。JavaScriptを使ってプルダウンメニューを動的に生成したり、選択肢の追加・削除などを行う際に利用されます。

ここでは、selectオブジェクトの基本的な作成方法から、主なプロパティやメソッド、実際のサンプルコードまで詳しく解説していきます。

selectオブジェクトの作成方法（構文）

selectオブジェクトを作成するには、以下のようにdocument.createElement()メソッドを使用します。

document.createElement("SELECT");

これにより、新しい<select>要素が生成され、後ほど紹介するサンプルのようにページへ動的に追加することができます。

selectオブジェクトの主なプロパティ一覧

selectオブジェクトには、以下のような便利なプロパティが用意されています。

プロパティ名説明
autofocusページ読み込み時に、そのドロップダウンリストへ自動フォーカスが当たるかどうかを取得・設定します。
disabledドロップダウンリストが無効化されているかどうかを取得・設定します。
lengthHTMLドキュメント内のドロップダウンリストに含まれる<option>要素の数を返します。
formドロップダウンリストを含むフォームへの参照を返します。
multiple複数の項目を選択できるかどうかを取得・設定します。
nameドロップダウンリストのname属性の値を取得・変更します。
sizeドロップダウンリストのsize属性の値を取得・変更します。
typeドロップダウンリストのtype属性の値を返します。
valueドロップダウンリストのvalue属性の内容を取得・変更します。
selectedIndexHTMLドキュメント内で選択されているオプションのインデックス番号を取得・変更します。

selectオブジェクトの主なメソッド一覧

次に、selectオブジェクトでよく使われるメソッドを見ていきましょう。

メソッド名説明
add()HTMLドキュメント内のドロップダウンリストに新しい選択肢（<option>要素）を追加します。
remove()HTMLドキュメント内のドロップダウンリストから指定した選択肢を削除します。
checkValidity()HTMLドキュメント内のドロップダウンリストの入力値が妥当かどうか（有効かどうか）を検証します。

selectオブジェクトの実装例（サンプルコード）

それでは、実際にHTML DOM selectオブジェクトを使用した例を見てみましょう。ボタンをクリックすると、動的にドロップダウンリストが生成されるシンプルなデモです。

<!DOCTYPE html>
<html>
<head>
<style>
    body{
        text-align:center;
        background-color:#fff;
        color:#0197F6;
    }
    h1{
        color:#23CE6B;
    }
    .btn{
        background-color:#fff;
        border:1.5px dashed #0197F6;
        height:2rem;
        border-radius:2px;
        width:60%;
        margin:2rem auto;
        display:block;
        color:#0197F6;
        outline:none;
        cursor:pointer;
    }
</style>
</head>
<body>
<h1>DOM select Object デモ</h1>
<button onclick="createDropDownList()" class="btn">ドロップダウンリストを作成する</button>
<script>
    function createDropDownList() {
        var dropDown = document.createElement("SELECT");
        dropDown.innerHTML="<option>CAKE</option><option>PIZZA<option><option>BURGER</option>";
        document.body.appendChild(dropDown);
    }
</script>
</body>
</html>

このコードを実行すると、次のような画面が表示されます。

HTML DOM selectオブジェクトとは？使い方・プロパティ・メソッドを解説

「ドロップダウンリストを作成する」ボタンをクリックすると、CAKE・PIZZA・BURGERの3つの選択肢を持つドロップダウンリストが動的に生成されます。

HTML DOM selectオブジェクトとは？使い方・プロパティ・メソッドを解説

コードのポイント

  • document.createElement("SELECT")で新しいselect要素を作成しています。
  • innerHTMLに<option>要素を文字列として渡すことで、選択肢をまとめて追加できます。
  • document.body.appendChild(dropDown)によって、生成したドロップダウンリストをページに追加しています。

まとめ

HTML DOMのselectオブジェクトを使えば、JavaScriptから<select>要素を自由に操作できます。createElement()による動的な生成をはじめ、add()／remove()による選択肢の管理、selectedIndexやvalueによる選択状態の制御など、フォーム操作において非常に強力な機能が揃っています。ぜひ実際のコードでも活用してみてください。

  1. HTML DOM Olオブジェクトとは？プロパティと使い方を徹底解説

    HTML DOMのOlオブジェクトは、HTMLにおける<ol>（順序付きリスト）要素を表します。JavaScriptを使えば、順序付きリストの開始番号や番号の種類などを動的に操作できます。 Ol要素の作成方法 JavaScriptで<ol>要素を新しく作成するには、document.createElement()メソッドを使用します。 var olObject = document.createElement(OL) ここで作成した「olObject」は、以下のプロパティを持っています。 プロパティ説明 reversedリストの順序を降順にするか、昇順（デフォル

  2. HTML DOM Ulオブジェクトとは？<ul>要素の操作方法とサンプルコードを解説

    HTML DOM の Ul オブジェクトは、HTML の <ul>（順序なしリスト）要素を表すオブジェクトです。JavaScript を使うことで、リストの動的な生成や操作が可能になります。 <ul> 要素の作成方法 新しい <ul> 要素を作成するには、document.createElement() メソッドを使用します。 var ulObject = document.createElement(UL) HTML5で非推奨となったプロパティ ulObject には以下のプロパティが存在しますが、これらは HTML5 ではサポートされていないため注