jQuery Get Selected Dropdown Option Value onchange

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()

ParameterDescription
FunctionOptional. 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



jQuery get the selected dropdown value on change


Recommended jQuery Tutorial

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *