Get selected text of dropdown in JavaScript onchange

Are you looking for a way to get the selected text of a dropdown using JavaScript ? If so, you’ve come to the right place!

In this article, I will discuss how to use JavaScript onchange event and get the selected text from a dropdown. I will also provide an example code snippet that may help you understand better.

To get selected text of dropdown using Javascript onchange event, all you have to do is add an onchange attribute with its value set as myFunc(this.value) inside your select tag.

Now, it's time to define our myFunc() function and pass an argument inside the function which returns us with whatever string value was chosen by user from our list options within select element. Here's an example below.

<select onchange="myFunc(this.value)">
 <option>Select Gender</option>    
 <option value="Male">Male</option> 
 <option value="Female">Female </option>   
 <option value="Other">Other</option>
</select>
<p id="result"></p>
<script>
 function myFunc(e){ 
   document.querySelector('#result').innerText = e;
 }
</script>