How to Get Selected Dropdown Value on Change Event Using jQuery
-
Use the
change()Method to Get Selected Dropdown Value on Change Event Using jQuery -
Use the
on()Method to Get Selected Dropdown Value on Change Event Using jQuery
This tutorial demonstrates how to perform a certain function when the selected value of the dropdown is changed using jQuery.
jQuery provides several methods to perform something if a dropdown value is changed. This tutorial demonstrates different methods to show jQuery on the dropdown change effect.
Use the change() Method to Get Selected Dropdown Value on Change Event Using jQuery
The change() is a built-in jQuery event that occurs whenever a value is changed in the form elements. Whenever we change a form value, the change will invoke a method attached to it.
The change() can be used for select boxes, checkboxes, dropdowns, radio buttons, etc. This method can be implemented in two ways:
$(selector).change()- It only triggers thechangeevent for the given elements.$(selector).change(function)- It will trigger thechangeevent and invoke the function provided inside the method; the function can be anything. This function is an optional parameter.
Let’s try an example using 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>
The code above can change the background color for the div every time a value is selected. See the output:
Use the on() Method to Get Selected Dropdown Value on Change Event Using jQuery
The on() method can be used with the change event to perform a certain operation when a value is selected. The on() method with change will invoke the event change and function provided inside it.
The on() method is built-in jQuery method used for different operations. The syntax for this method is:
$(selector).on(event, childSelector, data, function, map)
Where:
- The
eventis a mandatory parameter; in our case, it will bechange. - The
childSelectoris an optional parameter for specifying the child elements to which the event will be attached. - The
datais also an optional parameter used for the data to be passed when the event is triggered. - The
functionis also an optional parameter invoked when the event is triggered. - The
mapis the event map.
Now let’s try an example with the on() method to run the jQuery code after a value is selected:
<!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>
The code above can change the background color for the div using the on() method with a change event every time a value is selected. See the output:
Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.
LinkedIn Facebook