Jquery Get Selected Dropdown Value on Change

Get the selected value of dropdown in jquery by using id, name, class with onchange event how to get selected value of dropdown in jquery by id, name, class with on change event.
Get Selected Value of Dropdown in jQuery by id, name, class & tag
Using the jQuery change() method; you can get selected value of dropdown in jquery by id, name, class and tag with selected html elements.
- 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 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>