How to get the selected value of the dropdown list in JavaScript

1. Get the selected value of the dropdown list

We can use the value property of the selectbox to get the selected value of the dropdown list.

Explanation

In the above code:

• Lines 5 to 9: We create a selectbox with three options (one, two, and three).

• Line 14: We create a variable with name dropdownList and assign the created selectbox as the value.

• Line 15: We bind an event listener for the change event on the selectbox. The assigned function will be executed when the value of the selectbox changes. Inside the function, we get the value property of the select box and print it. The value property denotes the selected value of the selectbox.

2. Get the selected value and text of the dropdown list

If we want to get the selected option text, then we should use the selectedIndex property of the selectbox. The selectedIndex property denotes the index of the selected option. Once we get the selected index, we can access the selected option. From that, we can get the value and text of the option by accessing the value and text property, respectively.

Explanation

In the above code:

• Lines 5 to 9: We create a selectbox with three options (one, two, and three).

• Line 14: We create a variable with name dropdownList and assign the created selectbox as the value.

• Line 15: We bind an event listener for the change event on the selectbox. The assigned function will be executed when the value of the selectbox changes.

• Lines 16 and 17: Inside the function, we get the selectedIndex property of the select box and print it. It returns the index of the selected option element of the selectbox.

• Line 18: Using the selectedIndex property, we get the selected option of the selectbox and store it in the variable with name selectedOption.

• Lines 20 and 21: We access the value and text property of the selectedOption and print it.