Webフォームの作成方法を学習する場合、最も一般的なタスクの1つは、ドロップダウンメニューから値を取得することです。この記事では、JavaScriptを使用してこれらの値を取得する方法を学習します。
HTMLを使用してドロップダウン要素を作成する方法を簡単に説明します。迷子になった場合は、私のCodepenをフォローしてください。
ドロップダウン要素を作成するには、 select
を使用し、下にネストされたオプションの子を使用する必要があります。選択要素はドロップダウンメニューを作成し、オプションタグを使用して、これらのオプションをライブのドロップダウンメニューに設定します。
お気に入りのフルーツ(絵文字が含まれています)のドロップダウンメニューを作成しましょう。< / p>
空のh2を追加しました。これは、後でJavaScriptで入力します。この時点で、お気に入りのフルーツを選択できます。

重要性に注意してください valueプロパティ。この機能は、JavaScriptで簡単に再現できるスタイルなしのデータを提供します。一方、optionタグのテキストはほとんど何でもかまいませんので、信頼性がありません。valueのプロパティが重要です。ここで。
JavaScriptを使用したドロップダウン値の選択と表示
まず、<を使用してドロップダウンメニューのフルーツを選択する必要があります。選択タグのcode>getElementById。
ドロップダウンメニューが選択されたので、選択したオプションの値を取得できます。これはデフォルトで最初のオプションです。これを試してみましょう: