HOWTO · jQuery
jQuery を使用して変更イベントで選択されたドロップダウン値を取得する方法
このチュートリアルでは、ドロップダウンの選択された値が jQuery を使用して変更されたときに、特定の機能を実行する方法を示します。
このページの内容
jQuery の変更ハンドラーを使用すると、ドロップダウンの選択が変更された後にコードを実行できます。ハンドラー内では、this.value で選択されたオプションを読み取り、その値を使用してページを更新したり、別のアクションを実行したりします。以下の例では、各オプションを背景色に対応付けています。
change() メソッドを使用して、jQuery の変更イベントで選択されたドロップダウン値を取得する
jQuery では、change がイベント名です。change() はその省略メソッドで、イベントに応答するコードをバインドするハンドラーを渡します。ハンドラーなしで .change() を呼び出すと、代わりにイベントがトリガーされます。ハンドラーは登録されません。ドロップダウンの場合、ハンドラーはユーザーが別のオプションを選択したときに実行されます。
これはブラウザページの例であり、未実行の状態で提示されています。そのため、その動作は実行から観察されたものではなく、説明されたものです。完全なページでは、それを使用するコードの前に jQuery を読み込みます。select の value 属性は、ハンドラーが読み取る値です。初期オプションの値は 0 で、if/else ブランチは 0 から 3 を 4 つの CSS カラー名に対応付けます。選択されたオプションの値は文字列であるため、比較では引用符で囲まれた値を使用します。選択を変更すると、#Main div の背景色が更新されますが、そのテキストと境界線はそのまま残ります。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dropdown change with jQuery change()</title>
<style>
#Main {
border: 5px solid green;
background-color: lightblue;
min-height: 100px;
padding: 1rem;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function () {
$("#bgcolor").change(function () {
var bgcolor = this.value;
if (bgcolor === "0") {
$("#Main").css("background-color", "lightblue");
} else if (bgcolor === "1") {
$("#Main").css("background-color", "lightgreen");
} else if (bgcolor === "2") {
$("#Main").css("background-color", "lightpink");
} else {
$("#Main").css("background-color", "lightgrey");
}
});
});
</script>
</head>
<body>
<div id="Main">
<h1>Delftstack.com</h1>
<label for="bgcolor">Background color:</label>
<select name="bgcolor" id="bgcolor">
<option value="0">Blue</option>
<option value="1">Green</option>
<option value="2">Pink</option>
<option value="3">Grey</option>
</select>
</div>
</body>
</html>
ページが読み込まれると最初のオプションが選択されているため、パネルは水色から始まります。その後の各選択では、バインドされたハンドラーが呼び出され、対応する色が適用されます。色の割り当てを、メッセージの更新や表示結果のフィルタリングなど、ページに必要なアクションに置き換えてください。ハンドラーは、値を読み取りたい select にアタッチしたままにしてください。
on() メソッドを使用して、jQuery の変更イベントで選択されたドロップダウン値を取得する
同じハンドラーを on() でバインドするには、イベント名とコールバックを渡します：$(selector).on('change', handler)。ここでは、change がイベント名であり、関数がハンドラーです。セレクターはハンドラーを受け取る要素を識別します。子セレクター、データ、イベントマップの引数は、この直接的なドロップダウンの例では必要ありません。
この 2 番目のブラウザページの例も、未実行の状態で提示されています。以下のページは完全であり、change() の例と同じオプション、ID、色の対応付けを使用しています。on('change', ...) を使用してコールバックを登録し、次に this.value から選択されたオプションを読み取ります。on() の明示的なイベントとハンドラーの構造が必要な場合は、この形式を使用してください。表示される結果は同じ背景色の更新です。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dropdown change with jQuery on()</title>
<style>
#Main {
border: 5px solid green;
background-color: lightblue;
min-height: 100px;
padding: 1rem;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function () {
$("#bgcolor").on("change", function () {
var bgcolor = this.value;
if (bgcolor === "0") {
$("#Main").css("background-color", "lightblue");
} else if (bgcolor === "1") {
$("#Main").css("background-color", "lightgreen");
} else if (bgcolor === "2") {
$("#Main").css("background-color", "lightpink");
} else {
$("#Main").css("background-color", "lightgrey");
}
});
});
</script>
</head>
<body>
<div id="Main">
<h1>Delftstack.com</h1>
<label for="bgcolor">Background color:</label>
<select name="bgcolor" id="bgcolor">
<option value="0">Blue</option>
<option value="1">Green</option>
<option value="2">Pink</option>
<option value="3">Grey</option>
</select>
</div>
</body>
</html>
どちらのアプローチもハンドラーを change イベントにバインドします。どちらも別のボタンクリックを待ちません。最初の形式は jQuery の省略形であり、on() はイベントとコールバックを別々の引数として指定します。特定の select に対してバインディングを 1 つ選択することで、選択が変更されるたびにアクションが 1 回実行されます。ハンドラーが実行されていないように見える場合は、jQuery が ready コールバックの前に読み込まれたこと、セレクターが select の ID と一致すること、およびコールバックが値が必要な要素にバインドされていることを確認してください。背景色を更新するページはあくまで一例です。同じ this.value を使用して、コールバック内でアプリケーション固有のあらゆる作業を駆動できます。
