Get Selected Text Of Dropdown In JavaScript

In this tutorial we will show you the solution of get selected text of dropdown in JavaScript, from my struggle days, when I was working under an IT company.

I work as a junior web developer there. So, during those days I work on a project in which I have to get the selected text of a dropdown in JavaScript.

So, I was irritated so much that how we can get the selected text of dropdown. So, then my senior helped me a lot.

And Today I am going to share the method or way with help of which my senior helped to get the selected text of dropdown. Let us start without wasting time.

Step By Step Guide On Get Selected Text Of Dropdown In JavaScript :-

After that when my issue got resolved, then I come in touch with solutions that there are many ways with help of which we can get selected text of dropdown in JavaScript.

But today in this tutorial, I am going to share the way which I used as a reference from my senior. That codes were:

<label for="select">Choose your Favourite Marvel Character:</label>
    <select id="select" onchange="result(this)">
        <option value="" selected disabled hidden>--------------</option>
        <option value="iron_man">Iron Man</option>
        <option value="caption_america">Caption America</option>
        <option value="thor">Thor</option>
   <option value="hulk">Hulk</option>
   <option value="spider_man">Spider man</option>
    </select>
    <p id='response'>
 <script>
let result = (element) => {
     let res = document.getElementById('response');
        res.innerHTML = 'Selected Text is: <b>' + element.options[element.selectedIndex].text + '</b> </br>' ;
console.log(element.value);
    }
 </script>

1. As we here see that we today write only JavaScript codes in our example.
2. In previous tutorials, we already many times create a full code example in which we first create an HTML form with its basic structure. Inside that structure, we use HTML, head, title, body, and script tags.
3. In this example, as we see only, we write our JavaScript codes and HTML codes. And inside them, we see that we create a selection with some values. And you see that we use onchange on the select tag. This comes into action when we change the value of the select tag. And the function given inside this select onchange is defined in the script tag. So, now when we change the value of the select tag. The function comes into action.
4. And one more inside our script tag is the parameter. As we see that we write something element there that is our parameter. Now, after that, we see inside our function we fetch our paragraph tag inside JavaScript with help of getelementbyid and after that, we write the codes to change its inner HTML. The concept is that we want to show the value that we select and when we change the value of the selected text, we want that concerning this change our value got printed inside the paragraph tag.
5. Whereas another thing is that if due to some reasons our value did not display. Then you can also open the console. The above-given way is the best and easiest way with help of which you can get the selected text of dropdown in JavaScript.

Conclusion :-

At last, in conclusion, here we can say that with the help of this article we can understand how to get selected text of dropdown in JavaScript.

I hope this article on get selected text of dropdown in JavaScript helps you and the steps and method mentioned above are easy to follow and implement.