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

HTML DOM Select add()メソッドの使い方をわかりやすく解説

HTML DOM Select add()メソッドとは

HTML DOMのSelectオブジェクトが持つadd()メソッドは、HTMLドキュメント内のドロップダウンリスト（select要素）に、新しいoption要素を動的に追加するためのメソッドです。ユーザーの操作に応じて選択肢を後から追加したい場合などに活用できます。

構文

add()メソッドの基本構文は以下のとおりです。

object.add(option, index)

パラメータの説明

  • option（必須）： リストに追加するOption要素を指定します。
  • index（省略可）： 挿入位置を示すインデックス番号です。省略した場合、または無効な値を指定した場合は、リストの末尾に追加されます。

使用例

ここでは、ボタンをクリックするとドロップダウンリストに新しい科目を追加するサンプルを見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
    html{
        height:100%;
    }
    body{
        text-align:center;
        color:#fff;
        background: radial-gradient( circle farthest-corner at 23.1% 64.6%, rgba(129,125,254,1) 0%, rgba(111,167,254,1) 90% ) no-repeat;
        height:100%;
    }
    p{
        font-weight:700;
        font-size:1.1rem;
    }
    .drop-down{
        display:block;
        width:35%;
        border:2px solid #fff;
        font-weight:bold;
        padding:2px;
        margin:1rem auto;
        outline:none;
    }
    .btn{
        background:orange;
        border:none;
        height:2rem;
        border-radius:2px;
        width:35%;
        margin:2rem auto;
        display:block;
        color:#fff;
        font-weight:bold;
        outline:none;
        cursor:pointer;
    }
    .show{
        font-size:1.5rem;
        font-weight:bold;
    }
</style>
</head>
<body>
<h1>DOM Select add() method Demo</h1>
<p>Hi, Select your favourite subject:</p>
<select class='drop-down' name="Drop Down List">
<option>Physics</option>
<option>Biology</option>
</select>
<button type="button" onclick="addSubject()" class="btn">Add History Subject</button>
<div class="show"></div>
<script>
    function addSubject() {
        var dropDown = document.querySelector(".drop-down");
        document.querySelector(".show").innerHTML="Added History Subject";
        var option=document.createElement("OPTION");
        option.innerHTML="History";
        dropDown.add(option);
    }
</script>
</body>
</html>

実行結果

上記のコードをブラウザで実行すると、最初は「Physics（物理）」と「Biology（生物）」の2つの選択肢を持つドロップダウンリストが表示されます。

HTML DOM Select add()メソッドの使い方をわかりやすく解説

この状態で「Add History Subject」ボタンをクリックすると、JavaScriptの処理によって新しいoption要素が生成され、ドロップダウンリストに「History（歴史）」という選択肢が追加されます。

HTML DOM Select add()メソッドの使い方をわかりやすく解説

ポイント解説

サンプルコードの処理の流れは以下のとおりです。

  1. document.createElement("OPTION")で、新しいoption要素を作成します。
  2. option.innerHTML = "History"で、表示テキストを設定します。
  3. dropDown.add(option)で、作成したoption要素をselect要素に追加します。

なお、逆にドロップダウンリストから選択肢を削除したい場合は、remove()メソッドを使用します。add()とremove()を組み合わせることで、選択肢の動的な管理が容易になります。

  1. HTML DOMのhasAttributes()メソッドとは？構文・使い方・サンプルコードを解説

    HTML DOMのhasAttributes()メソッドは、ある要素が属性（attribute）を1つでも持っているかどうかを判定するためのメソッドです。要素が属性を保持している場合はtrueを返し、1つも属性を持っていない場合はfalseを返します。また、このメソッドを要素ノード以外のノードに対して呼び出した場合、戻り値は常にfalseになるという特徴があります。 構文 hasAttributes()メソッドの基本構文は以下のとおりです。 node.hasAttributes() 引数は不要で、対象となるノードに対して直接呼び出すだけで、真偽値（Boolean）が返されます。 使用例 ここで

  2. HTML DOM Textareaのselect()メソッドとは？使い方とサンプルコードを解説

    HTML DOM の Textarea select() メソッドは、HTMLドキュメント内のテキストエリア（textarea要素）の内容をプログラムから一括選択するためのメソッドです。このメソッドを呼び出すと、ユーザーがマウスやキーボードでドラッグして選択したときと同じように、テキストエリア内のすべてのテキストが選択状態になります。構文select() メソッドの基本的な構文は以下のとおりです。引数は不要で、対象の textarea 要素に対してそのまま呼び出します。object.select()それでは、HTML DOM Textarea select() メソッドの具体的な使用例を見てい