jQuery get selected dropdown option value onchange event; Through this tutorial, i am going to show you how to get selected dropdown value on change in jQuery using jQuery change() method.
How to get Selected Dropdown Value in jQuery on Change
You can use jQuery change() event method to to get selected dropdown option value in jquery on change.
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.
Syntax jQuery change() Method
$(selector).change()
Trigger the change event for the selected elements:
$(selector).change(function)
Parameters of jQuery change()
| 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
$('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>
<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" style="margin-top: 12px;"></div>
<script>
$('select').on('change', function() {
$('#location').text(this.value);
});
</script>
</body>
</html>
Demo jQuery get the selected dropdown value on change
Recommended jQuery Tutorial
Recommended:-How to Get Element by class, name, id in jQuery
Recommended:-jQuery Events List with Example
Recommended:-jQuery Click() Event Example
Recommended:-jQuery Blur Event Method Example
Recommended:-jQuery Focus () Event Method Example
Recommended:-jQuery Toggle Show Hide div on Click