How to Get Selected Value in Dropdown List Using JavaScript?

A dropdown list provides a list of elements that are linked with a particular function. By clicking on each element, the JavaScript code executes at the backend and performs a specific task regarding that element. The dropdown list property is very commonly used in e-commerce, educational, and stock market websites.

If you are exploring JavaScript to enhance your programming skills, then this is the best place for you to understand the basic concepts of JavaScript. In today’s guide, you will learn to extract the value which is selected in a dropdown list by utilizing JavaScript.

In this article, users will be able to get the value which is selected in the dropdown view by utilizing JavaScript.

How to Get Selected Value in a Dropdown List in JavaScript?

JavaScript can be used to retrieve values that are selected from the dropdown list and then display the value in the browser. This section provides a built-in function to get the value which is selected by the dropdown list.


An example is demonstrated to get the values from a dropdown list in JavaScript.


<!DOCTYPE html>



<title>Please select the element and see value</title>

<h2>An example to get selected value in dropdown list using JavaScript </h2>


* {font: 18px Arial;}




  <p>Please select the element and see value </p>

  <select id="sel" name="Sports">

     <option value="">-- Please Select --</option>

     <option value="Cricket">Cricket</option>

     <option value="Football" selected>Football</option>

     <option value="Hockey">Hockey</option>


  <input type="button" value="Please Click it" onclick=" selectVal(sel)">



   let selectVal = (ele) => {

     alert('Return the value of the selected option: ' + ele.value);




The code is described as:

  • First, a message is displayed to select the element from the dropdown list.
  • After that, the option keyword is utilized for dropdown lists such as Cricket, Football, and Hockey.
  • After clicking on each element, the piece of code is executed and pops up the values associated with the element.


The display represents a dropdown list by executing the above code. At the backend, different elements are attached to a list, and each is assigned a value. By clicking an element, the specific value is displayed in the pop-up window.


A dropdown list is utilized to get the selected value by clicking the options in JavaScript. For this purpose, <select> and <option> tags are employed for selection and giving options to the users, respectively. By clicking the option, the user extracts the associated value in the pop-up window of the web browser. Mostly, these dropdown lists are used on e-commerce sites. Here, you have learned to get the value which is selected in dropdown lists using JavaScript.

About the author

Syed Minhal Abbas

I hold a master's degree in computer science and work as an academic researcher. I am eager to read about new technologies and share them with the rest of the world.