JavaScriptを使用してドロップダウンフォームを作成する方法

インターネット テクノロジーの継続的な発展に伴い、動的インタラクティブ Web ページはユーザーの間でますます人気が高まっています。一般的に使用されるフォーム要素の 1 つであるドロップダウン ボックスは、スタイルがどんなに変わっても同じです。 。この記事ではJavaScriptでドロップダウンフォームを書く方法を紹介します。

1. 基本構造:

ドロップダウン フォームの最も基本的な構造は、 タグと複数の タグです。ドロップダウン フォームの基本構造は次のとおりです:

<select id="dropdown">
  <option value="">请选择</option>
  <option value="1">选项一</option>
  <option value="2">选项二</option>
  <option value="3">选项三</option>
  <option value="4">选项四</option>
</select>

2. ドロップダウン フォームの実装:

1. DOM を介してドロップダウン フォームを取得します:

まず、

を取得する必要があります。ラベルは、JavaScript ドキュメント オブジェクトの getElementById メソッドを通じて取得できます:

var dropdown = document.getElementById("dropdown");

2. イベント モニタリングを通じてドロップダウン フォームを実装します:

次に、ドロップダウン ボックスの機能を実装する必要があります。ユーザーがドロップダウン ボックスでオプションが選択されたとき、イベントに応答して選択された値を取得する必要があります。

dropdown.addEventListener("change", function() {
  var value = dropdown.options[dropdown.selectedIndex].value;
  console.log(value); 
});

3. オプションを動的に追加する:

オプションを動的に追加する必要がある場合があります。 JavaScript では、createElement メソッドと appendChild メソッドを使用して タグを動的に追加できます:

var option = document.createElement("option");
option.text = "选项五";
option.value = "5";

dropdown.appendChild(option);

3. コード全体:

<select id="dropdown">
  <option value="">请选择</option>
  <option value="1">选项一</option>
  <option value="2">选项二</option>
  <option value="3">选项三</option>
  <option value="4">选项四</option>
</select>

<script>
  var dropdown = document.getElementById(&quot;dropdown&quot;);
  
  dropdown.addEventListener("change", function() {
    var value = dropdown.options[dropdown.selectedIndex].value;
    console.log(value);  
  });
  
  var option = document.createElement("option");
  option.text = "选项五";
  option.value = "5";
  
  dropdown.appendChild(option);
</script>

4. 概要:

使用JavaScript でドロップダウン フォームを記述することは、基本的なフロントエンド開発テクノロジであり、複雑なインタラクティブな効果を実現するのに役立ち、ページのインタラクティブ性をより向上させることもできます。この記事を学習することで、JavaScript を使用してドロップダウン フォームを作成する方法を学習したと思います。

以上がJavaScriptを使用してドロップダウンフォームを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。