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 »