JavaScript のドロップダウンリストから選択したオプションの値を取得する
JavaScript では、マウスのクリックやキーボードのキー押下などのユーザーインタラクションを操作または追跡することは困難です。JavaScript イベントのおかげで、ユーザーの操作を追跡し、Web ページ上のユーザーが変更を加えた後に更新された値を取得するのが簡単になりました。
たとえば、ドロップダウンメニューがあり、他のすべての選択肢のリストからオプションを選択する必要がある場合は、次のようになります。ドロップダウンから選択したオプションの値を簡単に取得できます。マウスのクリックイベントの助けを借りてリストします。
この記事を読むと、これを実装する方法が詳しくわかります。
JavaScript でマウスイベントを使用してリストから選択したオプションを取得する
JavaScript のイベントは、マウスクリックやキーボードクリックイベントなど、Web ページでのユーザーの操作を追跡するための優れた方法です。JavaScript で利用できるさまざまなイベントがあり、その完全なリストはここにあります。これらすべてのイベントのうち、マウスのクリックイベントについてのみ説明します。
ユーザーがドロップダウンリスト内にあるオプションのいずれかをクリックするたびに、マウスのクリックイベントがトリガーされます。この機能を使用すると、ドロップダウンから選択したオプションの値を簡単に取得できます。
実行中にどのように機能するかを見てみましょう。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<select id="list">
<option class="drop-down">test1</option>
<option class="drop-down" selected="selected">test2</option>
<option class="drop-down">test3</option>
</select>
<script src="./script.js"></script>
</body>
</html>
以下は JavaScript コードです。
function myFunction() {
let elem = document.querySelectorAll('.drop-down');
elem.forEach(element => {
element.addEventListener('click', e => {
console.log(e.target.innerHTML);
});
})
}
myFunction();
出力：
test2
test3
test1
ドロップダウンからユーザーが選択したオプションによって、出力が異なることに注意してください。
HTML 内には、ドロップダウンリストの作成に使用される list の id を持つ select タグがあります。この場合、select タグ内に 3つのオプションがあり、それぞれに drop-down のクラス名があります。そして最後に、別のファイルに存在するため、body タグの最後にある JavaScript コードをリンクしています。
JavaScript の中には、myFunction() という名前の関数があります。ここでは、最初に、querySelectorAll プロパティを使用してクラス名 drop-down を使用して、ドロップダウンリストのすべてのオプション要素を取得します。このプロセスは、ドロップダウンリストのすべてのオプションを含む配列を返します。次に、この配列を elem という変数内に格納します。
変数 elem にすべてのオプションが格納されたので、その変数で for each ループを使用します。for each ループは、配列の個々の要素を取得するのに役立つため、配列のこれらのオプション要素のそれぞれにイベントリスナーを追加できるようになりました。
配列内の個々の要素には、for each ループに引数として渡される変数 element を使用してアクセスできます。element にイベントを追加するには、JavaScript が提供する addEventListener() というメソッドを使用する必要があります。このメソッドは 2つの引数を取ります。
最初の引数はクリックイベントであり、2 番目の引数は callback 関数です。クリックイベントは、ユーザーがドロップダウンからオプションのいずれかをクリック（マウスの左ボタン）した場合にのみ、callback 機能を実行するようにブラウザに指示します。callback 関数自体は、e またはイベントと呼ばれる引数を取ります。これは、ユーザーが選択した要素を取得するのに役立ちます。
callback 関数では、好きなコードを書くことができます。この場合に選択されたオプションの値を取得したいので、e.target を使用します。このコマンドは、現在選択されている HTML 要素を示します。
最後に、選択したオプションの値を取得するには、e.target.innerHTML を使用し、これを console.log() メソッド内に渡して、コンソールウィンドウに出力を表示します。
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn