HOWTO · jQuery
jQueryを使用した変更イベントで選択されたドロップダウン値
このチュートリアルでは、ドロップダウンの選択された値が jQuery を使用して変更されたときに、特定の機能を実行する方法を示します。
このチュートリアルでは、ドロップダウンの選択された値が jQuery を使用して変更されたときに、特定の機能を実行する方法を示します。
jQuery には、ドロップダウン値が変更された場合に何かを実行するためのメソッドがいくつか用意されています。 このチュートリアルでは、ドロップダウンの変更効果で jQuery を表示するさまざまな方法を示します。
change() メソッドを使用して、jQuery を使用して変更イベントで選択したドロップダウン値を取得する
change() は、フォーム要素で値が変更されるたびに発生する組み込みの jQuery イベントです。 フォームの値を変更するたびに、その変更によってそれに関連付けられたメソッドが呼び出されます。
change() は、選択ボックス、チェックボックス、ドロップダウン、ラジオ ボタンなどに使用できます。このメソッドは、次の 2つの方法で実装できます。
$(selector).change()- 指定された要素のchangeイベントのみをトリガーします。$(selector).change(function)-changeイベントをトリガーし、メソッド内で提供される関数を呼び出します。 関数は何でもかまいません。 この関数はオプションのパラメーターです。
change() を使った例を試してみましょう:
<!DOCTYPE html>
<html>
<head>
<title>JQuery Change Method</title>
<style>
#Main {
border: 5px solid green;
background-color : lightblue;
height: 10%;
width: 20%;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(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>
<select name="bgcolor" id="bgcolor">
<option value="0">Background Color Blue</option>
<option value="1">Background Color Green</option>
<option value="2">Background Color Pink</option>
<option value="3">Background Color grey</option>
</select>
</div>
</body>
</html>
上記のコードは、値が選択されるたびに div の背景色を変更できます。 出力を参照してください。
on() メソッドを使用して、jQuery を使用して変更イベントで選択したドロップダウン値を取得する
on() メソッドを change イベントと共に使用して、値が選択されたときに特定の操作を実行できます。 change を指定した on() メソッドは、その内部で提供されるイベント change と関数を呼び出します。
on() メソッドは、さまざまな操作に使用される組み込みの jQuery メソッドです。 このメソッドの構文は次のとおりです。
$(selector).on(event, childSelector, data, function, map)
どこ：
eventは必須パラメーターです。 私たちの場合、それはchangeになります。childSelectorは、イベントが関連付けられる子要素を指定するためのオプションのパラメーターです。dataは、イベントがトリガーされたときに渡されるデータに使用されるオプションのパラメーターでもあります。functionは、イベントがトリガーされたときに呼び出されるオプションのパラメーターでもあります。mapはイベントマップです。
次に、値が選択された後に jQuery コードを実行する on() メソッドの例を試してみましょう。
<!DOCTYPE html>
<html>
<head>
<title>JQuery On Method</title>
<style>
#Main {
border: 5px solid green;
background-color : lightblue;
height: 10%;
width: 20%;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(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>
<select name="bgcolor" id="bgcolor">
<option value="0">Background Color Blue</option>
<option value="1">Background Color Green</option>
<option value="2">Background Color Pink</option>
<option value="3">Background Color grey</option>
</select>
</div>
</body>
</html>
上記のコードは、値が選択されるたびに change イベントで on() メソッドを使用して div の背景色を変更できます。 出力を参照してください。
