jQuery Get Selected Option Value on Change

jQuery Get Selected Option Value on Change

jQuery change()

The JQuery change () event occurs when the value of an 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

$(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>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').on('change', function() {
	  $('#location').text(this.value);
	});
</script>    
 </body>    
</html>   

Example-2 of jQuery change() event

Let’s see an example with demonstrate jQuery change().

<!DOCTYPE html>    
<html lang="en">    
<head>    
  <meta charset="utf-8">    
  <title>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>   

Leave a Reply

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