jQuery Set Selected Value of Dropdown

July 11, 2022July 11, 2022 Rabiya 0 Comments

Set selected value of dropdown in jquery by id, name, class; In this tutorial, you will learn how to set selected value of dropdown in jquery by id, name, class.

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

Using the jQuery change() method; you can set the selected value of dropdown in jquery by using id, name, class, and tag with selected html elements; see the following example for that:

Example 1 :- Set selected value of dropdown in jquery by id
Example 2 :- Set selected value of dropdown in jquery by Name
Example 3 :- Set selected value of dropdown in jquery by Class

Before setting the value of the dropdown in jQuery, you need to know that the value of the selected dropdown is obtained. For this have taken a simple example which is as follows:

$('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 1 :- Set selected value of dropdown in jquery by id

Let’s see the following example of jquery set selected option value by id; as shown below:

<html>
<head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
Example 1:
<select name ="example1" id="example1" class="abc">
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3">three</option>
    <option value="4">four</option>
</select>
 
 
<script>
$(document).ready(function() {
   
$('#example1').val("4");
   
});
</script>
 
</body>
</html>

Example 2 :- Set selected value of dropdown in jquery by id

Let’s see the following example of jquery set selected option value by name; as shown below:

<html>
<head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
Example 1:
<select name ="example1" id="example1" class="abc">
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3">three</option>
    <option value="4">four</option>
</select>
 
 
<script>
$(document).ready(function() {
   
$('select[name="example1"]').val("4");
});
</script>
 
</body>
</html>

Example 3 :- Set selected value of dropdown in jquery by Class

Let’s see the following example of jquery set selected option value by class; as shown below:

<html>
<head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
Example 1:
<select id="example1" class="abc">
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3">three</option>
    <option value="4">four</option>
</select>
 
 
<script>
$(document).ready(function() {
 
  $(".abc").val('2');
});
</script>
 
</body>
</html>