Get the selected value of dropdown in jquery by using id, name, class, text, tag; In this tutorial, you will learn how to get selected value of dropdown in jquery by id, name, class, text and tag with on change event.
How To Get Selected Dropdown Option Value In jQuery using on Change Event
To get the selected value of a dropdown list or select element when the user makes a selection. Here, you will explore how to use jQuery to get the selected option value using the onChange event:
- jQuery change() Event Method
- Syntax jQuery change() Event Method
- Parameters of jQuery change() Event Method
- Example 1 :- jQuery get the selected dropdown value on change by id
- Example 2 :- jQuery get the selected dropdown value on change by name
- Example 3 :- jQuery change() event with JavaScript GetElementById
jQuery change() Event Method
The JQuery change() event occurs when the value of an HTML element changes. It only works on the form fields. When the change event occurs, the change() method encloses a function to run.
For the selected menu, the change event occurs when an dropdown option is selected. For text field or text fields, the occurrence of change occurs when the field loses focus after the content changes.
Syntax jQuery change() Event Method
$(selector).change()
Trigger the change event for the selected elements:
$(selector).change(function)
Parameters of jQuery change() Event Method
| Parameter | Description |
| Function | Optional. Specifies the function to run when the change event occurs for the selected elements |
Example 1 :- jQuery get the selected dropdown value on change by id
Take an example of jquery get selected option value on change by id; see the following
$('select').on('change', function() {
alert( this.value );
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery get the selected dropdown value on change</title>
<style>
div {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<select id="select_id" name="actors">
<option>Test</option>
<option selected="selected">Java</option>
<option>Python</option>
<option>Ruby</option>
<option>PHP</option>
<option>Jquery</option>
</select>
<div id="location"></div>
<script>
$('#select_id').on('change', function() {
$('#location').text(this.value);
});
</script>
</body>
</html>
Example 2 :- jQuery get the selected dropdown value on change by name
Take an example of jquery get selected option value on change by name; see the following
$('select[name="lang"]').on('change', function() {
$('#location').text(this.value);
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery get the selected dropdown value on change by name</title>
<style>
div {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<select id="select_id" name="lang">
<option>Test</option>
<option selected="selected">Java</option>
<option>Python</option>
<option>Ruby</option>
<option>PHP</option>
<option>Jquery</option>
</select>
<div id="location"></div>
<script>
$('select[name="lang"]').on('change', function() {
$('#location').text(this.value);
});
</script>
</body>
</html>
Example 3 :- jQuery change() event with JavaScript GetElementById
Let’s see an example with demonstrate jQuery change().
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Change Event Example</title>
<style>
div {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<select id="select_id" name="actors" >
<option>Test</option>
<option selected="selected">Java</option>
<option>Python</option>
<option>Ruby</option>
<option>PHP</option>
<option>Jquery</option>
</select>
<div id="location"></div>
<script>
$( "select" ).change(function () {
document.getElementById("location").innerHTML="You selected: "+document.getElementById("select_id").value;
});
</script>
</body>
</html>
Conclusion
Getting the selected option value in jQuery using the onChange event is a simple task that can be accomplished in just a few lines of code. By following the steps outlined in this tutorial, you can easily retrieve the selected value of a dropdown list by it’s name, id, class and tag and use it in your web application to enhance the user experience.
Recommended jQuery Tutorial
- How to Get the Current Page URL in jQuery
- jQuery Ajax Get() Method Example
- get radio button checked value jquery by id, name, class
- jQuery Set & Get innerWidth & innerHeight Of Html Elements
- jQuery Get Data Text, Id, Attribute Value By Example
- Set data attribute value jquery
- select multiple class in jquery
- How to Remove Attribute Of Html Elements In jQuery
- How to Checked Unchecked Checkbox Using jQuery
- jQuery removeClass & addClass On Button Click By E.g.
- Get and Set Input, Select box, Text, radio Value jQuery
