jQuery get selected option value onchange

Get the selected value of dropdown in jquery by using id, name, class, text, tag; In this tutorial, you will learn how to get selected value of dropdown in jquery by id, name, class, text and tag with on change event.

How To Get Selected Dropdown Option Value In jQuery using on Change Event

To get the selected value of a dropdown list or select element when the user makes a selection. Here, you will explore how to use jQuery to get the selected option value using the onChange event:

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 dropdown 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>

Conclusion

Getting the selected option value in jQuery using the onChange event is a simple task that can be accomplished in just a few lines of code. By following the steps outlined in this tutorial, you can easily retrieve the selected value of a dropdown list by it’s name, id, class and tag and use it in your web application to enhance the user experience.

AuthorAdmin

Leave a Reply Cancel reply