JavaScriptを使用してドロップダウンフォームを作成する方法-フロントエンドQ&A-php.cn

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

王林

リリース： 2023-05-06 10:54:07

オリジナル

736 人が閲覧しました

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

1. 基本構造:

ドロップダウンフォームの最も基本的な構造は、を取得する必要があります。ラベルは、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 サイトの他の関連記事を参照してください。