Getting the Selected option value in JavaScript

In this tutorial, we are going to learn about how to get a selected option value from the dropdown list using JavaScript.

Consider we have a dropdown list like this.

<select id="places">
    <option hidden> Select</option>
    <option value="india">India</option>
    <option value="usa">Usa</option>
    <option value="uk">Uk</option>
</select>

Now, we need to get the above element’s value when a particular <option> is selected.

Using element.value property

To get the selected option value first, we need to access the <select> element by using its id attribute then it has a value property which is holding the data you are selected.

const places = document.getElementById('places');

// on change eventlistener is attached
places.addEventListener('change', ()=>{
    // getting value
    console.log(places.value);})

In the above code, we have attached onchange event listener to the select element. so that when a option is selected its value is logged inside the console.

If you want to get the text of a selected option instead of value, you can do it like this.

const places = document.getElementById('places');


places.addEventListener('change', ()=>{
    // getting text
    console.log(places.options[places.selectedIndex].text);})