jQuery Get Selected Option Value onchange

jQuery Get Selected Option Value onchange

If you are looking like, jquery get selected option value onchange, get selected value of dropdown in javascript, jquery set dropdown selected value by value, get selected value of dropdown in jquery on button click, jquery onchange dropdown, jquery change select option value, jquery trigger change event, jquery change select option value and text, javascript select onchange get value, onchange event in jquery for textbox example. So this tutorial help you.

jQuery 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.

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

Here we will take an example like jquery get selected option value onchange.

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

Example 2 :- jQuery change() event

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>   

Recommended jQuery Tutorial

  1. How to Get the Current Page URL in jQuery
  2. jQuery Ajax Get() Method Example
  3. get radio button checked value jquery by id, name, class
  4. jQuery Set & Get innerWidth & innerHeight Of Html Elements
  5. jQuery Get Data Text, Id, Attribute Value By Example
  6. Set data attribute value jquery
  7. select multiple class in jquery
  8. How to Remove Attribute Of Html Elements In jQuery
  9. How to Checked Unchecked Checkbox Using jQuery
  10. jQuery removeClass & addClass On Button Click By E.g.
  11. Get and Set Input, Select box, Text, radio Value jQuery

Leave a Reply

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