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 <kbd class="highlighted">prop()</kbd> method can help you set the selected property for jQuery 1.6+ versions:

Javascript Jquery prop method get the text value of the selected option

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

Try it Yourself »

attr()

This method sets the attributes and values of the selected elements. Note: Using attr() for boolean properties like selected is deprecated in modern jQuery. Use prop() instead.

Javascript Jquery attr method sets the attributes and values of the selected elements

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <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;
        }).attr('selected', true);
    </script>
  </body>
</html>

Try it Yourself »

val()

The <kbd class="highlighted">val()</kbd> method sets the value of the <select> element directly. It does not search by option text; for text-based selection, use prop().

Javascript Jquery val method sets the select value directly

<!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>
      // val() sets the <select> element's value directly, not by option text
      $("select").val("1");
    </script>
  </body>
</html>

Try it Yourself »