How to get selected value from dropdown in javascript?

How to get selected value from dropdown in javascript?

                             *****                        

   On - 2023

   By - Apu Gorai

How to get the selected text of a dropdown in JavaScript and display a message with its value whenever someone selects another option.

Create a <select> element in your HTML and add it to the page.

<script>

</script>

Add <option> elements to the <select> element to provide the options that the user can choose from.

Set an id attribute on the <select> element so it can be easily referenced in the JavaScript.

<select id="select">
  <option value="#ff0000">Red</option>
  <option value="#09bd45">Green</option>
  <option value="#3f00ff">Blue</option>
</select>

Add an onchange event listener to the <select> element.

In the event listener, use the id of the <select> element to get a reference to it.

Use the selectedIndex property of the <select> element to get the index of the currently selected option.

Example - 

                             

<script>
const selectE = document.querySelector('#select');
selectE.addEventListener('change', (event) => {
  const selectedIndex = event.target.selectedIndex;
  const options = event.target.options;
  const selectedOption = options[selectedIndex];
  const selectedText = selectedOption.text;
  const selectedValue = selectedOption.value;

  alert(`You selected: ${selectedText} (${selectedValue})`);
});
</script>

Try It Yourself »