How to Change Selected Value of a Drop-Down List Using jQuery

If you have a select element and want to set the selected value of a drop-down via its text description, you can achieve it using different jQuery methods. Let's discuss them separately and choose the best one for you.

prop()

The jQuery prop() method can help you get the text value of the selected option for jQuery 1.6+ versions:

<!DOCTYPE html>
<html>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
  <body>
    <select>
      <option value="0">Value1</option>
      <option value="1">Value2</option>
    </select>
    <script>
      let text = 'Value2';
      $("select option").filter(function() {
          //may want to use $.trim in here
          return $(this).text() == text;
        }).prop('selected', true);
    </script>
  </body>
</html>

attr()

This method sets the attributes and values of the selected elements. Use it for jQuery versions below 1.6 and greater than or equal to 1.4:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  </head>
  <body>
    <select>
      <option value="0">Value1</option>
      <option value="1">Value2</option>
    </select>
    <script>
      let text = 'Value2';
      $("select option").filter(function() {
          //may want to use $.trim in here
          return $(this).text() == text;
        }).attr('selected', true);
    </script>
  </body>
</html>
This approach will work in versions above 1.6 but less than 1.9. In jQuery 1.9+ versions it won't work. For 1.9+ versions use prop() instead of attr().

val()

The val() method also sets the option that corresponds to the passed value:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
  </head>
  <body>
    <select>
      <option value="0">Value1</option>
      <option value="1">Value2</option>
    </select>
    <script>
      let text = 'Value2';
      $("select option").filter(function() {
          //may want to use $.trim in here
          return $(this).text() == text;
        }).val('selected');
    </script>
  </body>
</html>

The prop() Method

The .prop() method is used to retrieve the property value for the first element only in the matched set. If the value of a property has not been set or the matched set has no elements, it will return undefined. Use jQuery's .each() or .map() looping methods to get the value for each element individually.

The attr() Method

The .attr() method is used to get the attribute value for the first element only in the matched set. Use the .each() or .map() looping methods for getting the value for each element individually. The .attr() method returns undefined for those attributes that have not been set for jQuery 1.6 version. Use the .prop() method for retrieving and changing DOM properties such as the checked, selected, or disabled state of form elements.

The val() Method

The .val() method is mainly used to get the values of form elements such as input, select and textarea. It will return undefined if it is called on an empty set. When the first element in the set is a select-multiple, val() returns an array that contains the value of each selected option. If no option is selected, it will return an empty array for jQuery 3.0 version. For versions below jQuery 3.0, it returns null.