jQuery get selected option value onchange

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

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

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

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

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