jQuery Set Value of Select Option with Examples

Last Updated on September 4, 2022 by Roshan Parihar

In this tutorial, you will learn how to set value of select dropdown option using jQuery. The short answer is to use the val() and pass the value as its arguments to assign.

When you know the required value from the select dropdown options, you can select that option using jQuery. Let’s find out the different methods with the examples given below.

Method 1: Set Value of Select Option Using val()

To set the value of the select option using jQuery, you can use the val() function that takes a single argument. The argument is the required value of the select dropdown to specify and select. You can add the value as an argument within the quotes (' ').

Note: If you want to specify a value using a variable, you can add the variable as the argument of the function without using quotes.

Output



The above example contains the select dropdown with three options to select. The specified value to get selected using jQuery is ‘Red’. When you click the button element, the specified value gets selected using jQuery.

Method 2: Using attr() Function of jQuery

In addition to the above example, you can also use the attr() that takes two arguments to pass and select the dropdown option. Both the first and the second argument of the function are 'selected'.

To specify the value, you have to use the jQuery selector code snippet $("select option[value=myvalue]") before the attr(). Also, don’t forget to replace the myvalue with your specific value to set the value of the select option.

Output



The above example contains a dropdown with three options. The example specifies the value ‘Two’ to select on button click. With a click of the button, jQuery sets the specified value of the select dropdown option.

You May Also Like to Read

Leave a comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.