How to retrieve the value of a select element using Javascript

January 16th 2024

Summary

A lot of the time in Javascript we are handling user input. Select elements are very common to see in user interfaces, and we need to retrieve the item users have selected. Here is some code I've found useful to help with this.

The Code

HTML

<select id="select-elm-id">
    <option value="1">One</option>
    <option value="2" selected>Two</option>
    <option value="3">Three</option>
</select>

Javascript

function getSelectValue(selectElm) {
    if(selectElm) {
        return selectElm.options[selectElm.selectedIndex].text;
    } 
    return "";
}

const selectElm = document.getElementById("select-elm-id");
console.log(getSelectValue(selectElm));