JavaScriptでドロップダウン値を取得する方法

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

ドロップダウンHTML要素

HTMLを使用してドロップダウン要素を作成する方法について簡単に要約してみましょう。迷子になった場合は、私のCodepenに従ってください。

ドロップダウン要素を作成するには、selectを使用する必要があります タグを付けてoptionを使用します その下にネストされた子。 select要素はドロップダウンを作成し、オプションタグを使用して、ドロップダウンを有効にするオプションを定義します。

お気に入りの果物（絵文字が含まれている）のドロップダウンを作成しましょう。

<select name="fruits" id="fruits">
  <option value="">--select--</option>
  <option value="avocado">Avocado🥑</option>
  <option value="watermelon">Watermelon🍉</option>
  <option value="kiwi">Kiwi🥝</option>
  <option value="tomato">Tomato🍅</option>
</select>
<h2 id="pick"></h2>

後でJavaScriptを入力する空のh2を追加しました。この時点で、お気に入りの果物を選ぶことができます：

valueプロパティの重要性に注意してください 。このプロパティは、JavaScriptで簡単に再生できる定型化されていないデータを提供します。一方、オプションタグ内のテキストはほとんど何でもかまいません。そのため、信頼性は高くありません。ここで重要なのはvalueプロパティです。

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

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

const element = document.getElementById("fruits");

ドロップダウンが選択されたので、現在選択されているオプションの値を取得できます。これはデフォルトで最初のオプションです。それを試してみましょう：

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

const checkValue = element.options[element.selectedIndex].value;
const checkText = element.options[element.selectedIndex].text;

ここでは、elementsoptions配列属性にアクセスしています。次に、現在選択されているオプションのインデックスを選択し、その値またはテキストにアクセスします。

次に、両方の変数をconsole.logにしてみてください。何が起こるのですか？何もない。なんで？最初の要素には空の値があるためです（これは単なるプレースホルダーです）。最初のオプションをコメントアウトして、再試行してください。わーい！ javascriptで値とテキストの両方を取得します。

JavaScriptでドロップダウンの変更をリッスンする

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

element.addEventListener("change", (e) => {
  const value = e.target.value;
  const text = element.options[element.selectedIndex].text;
 
  if (value) {
    document.getElementById("pick").textContent = `Value Selected: ${value}`;
  } else {
    document.getElementById("pick").textContent = "";
  }
});

eventListenerを使用 ドロップダウンの変更をリッスンしています。 e.target.valueを実行して、選択したオプションの値を取得する方法にも注意してください。 、これはおそらくフォームに関する別のチュートリアルで見たことがあるでしょう。

到着しました。これで、任意のフルーツオプションを選択でき、JavaScriptはドロップダウンの変更に反応し、それに応じてh2を更新します。非常に実り多い権利です！

結論

ドロップダウン値を取得することは、Web開発を学ぶ上で重要なスキルです。データベースを更新したり、選択内容をユーザーに表示したり、DOMの変更に「反応」したりする場合は、取得する値が重要です。 JavaScriptを使用すると、そのような値をすぐに取得できます。