Jquery Get Selected Dropdown Value on Change

June 28, 2022June 28, 2022 Rabiya 0 Comments

jQuery Get Selected Dropdown Option Value onchange - Lara Tutorials

Get the selected value of dropdown in jquery by using id, name, class with onchange event how to get selected value of dropdown in jquery by id, name, class with on change event.

Get Selected Value of Dropdown in jQuery by id, name, class & tag

Using the jQuery change() method; you can get selected value of dropdown in jquery by id, name, class and tag with selected html elements.

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