JavaScriptを選択

| | | | |

Webフォームの作成方法を学習する場合、最も一般的なタスクの1つは、ドロップダウンメニューから値を取得することです。この記事では、JavaScriptを使用してこれらの値を取得する方法を学習します。

HTMLを使用してドロップダウン要素を作成する方法を簡単に説明します。迷子になった場合は、私のCodepenをフォローしてください。

ドロップダウン要素を作成するには、 select を使用し、下にネストされたオプションの子を使用する必要があります。選択要素はドロップダウンメニューを作成し、オプションタグを使用して、これらのオプションをライブのドロップダウンメニューに設定します。

お気に入りのフルーツ(絵文字が含まれています)のドロップダウンメニューを作成しましょう。< / p>

空のh2を追加しました。これは、後でJavaScriptで入力します。この時点で、お気に入りのフルーツを選択できます。

92151925 81da0a00 Ede7 11EA 9796 2a8a506c4a6e

重要性に注意してください valueプロパティ。この機能は、JavaScriptで簡単に再現できるスタイルなしのデータを提供します。一方、optionタグのテキストはほとんど何でもかまいませんので、信頼性がありません。valueのプロパティが重要です。ここで。

JavaScriptを使用したドロップダウン値の選択と表示

まず、<を使用してドロップダウンメニューのフルーツを選択する必要があります。選択タグのcode>getElementById。

ドロップダウンメニューが選択されたので、選択したオプションの値を取得できます。これはデフォルトで最初のオプションです。これを試してみましょう:

ここで、属性オプションd`配列要素にアクセスします。次に、選択したオプションのインデックスを選択し、その値またはテキストにアクセスします。

ここで、両方の変数をconsole.logにしてみてください。どうしたの?何もない。なんで?最初の要素には空の値があるためです(これは単なるプレースホルダーです)。最初のオプションについて意見を述べて、もう一度やり直してください。わーい! javascriptで値とテキストを取得します。

javascriptでドロップダウンメニューの変更をリッスンします

JavaScriptのため、ドロップダウンメニューを動的にする必要がありますページの変更に反応するように設計されています。そのことを念頭に置いて、フルーツ要素に eventListenerを割り当てます。

eventListener を使用すると、ドロップダウンメニューの変更が聞こえます。 e.target.value を実行して、選択したオプションの値を取得することもできます。これは、おそらく別のチュートリアルモジュールで見たものです。

ここにあります。これでフルーツオプションを選択できます。JavaScriptはドロップダウンメニューの変更に反応し、それに応じてh2を更新します。成功した法則

92155152 88b74b80 Edec 11EA 8016 7f8911f26735