Get Selected Value in Dropdown List Using Javascript

Dropdown lists are a common feature in web forms, allowing users to select an option from a list. In this blog post, we will explore how to get the selected value from a dropdown list using JavaScript.

Method 1: Using the value property

The value property of a dropdown list can be used to get the selected value. Here’s how:

// Get the dropdown element
var dropdown = document.getElementById("myDropdown");

// Get the selected value
var selectedValue = dropdown.value;

// Log the selected value
console.log(selectedValue);

In this code snippet, we first get the dropdown element using its ID. Then, we use the value property to get the selected value. Finally, we log the selected value to the console.

Method 2: Using the selectedIndex property

The selectedIndex property of a dropdown list can also be used to get the selected value. Here’s how:

// Get the dropdown element
var dropdown = document.getElementById("myDropdown");

// Get the selected index
var selectedIndex = dropdown.selectedIndex;

// Get the selected value
var selectedValue = dropdown.options[selectedIndex].value;

// Log the selected value
console.log(selectedValue);

In this code snippet, we first get the dropdown element using its ID. Then, we use the selectedIndex property to get the index of the selected option. Next, we use the options property to access the selected option by its index, and finally, we use the value property to get the selected value. We log the selected value to the console.

Method 3: Using event listeners

If you want to get the selected value when the user changes the selection, you can use event listeners. Here’s how:

// Get the dropdown element
var dropdown = document.getElementById("myDropdown");

// Add an event listener for the "change" event
dropdown.addEventListener("change", function() {
  // Get the selected value
  var selectedValue = dropdown.value;

  // Log the selected value
  console.log(selectedValue);
});

In this code snippet, we first get the dropdown element using its ID. Then, we add an event listener for the “change” event, which fires when the user changes the selection. Inside the event listener, we get the selected value using the value property and log it to the console.

Now that you have learned three different methods to get the selected value from a dropdown list using JavaScript, you can choose the one that best suits your needs. Happy coding!