How To Get Selected Value From Select on Change in Javascript

In this short tutorial, we will learn to get selected option value on change.

HTML

<div class="container">
  <select name="select" id="select">
    <option value="">Region</option>
    <option value="Africa">Africa</option>
    <option value="Asia">Asia</option>
    <option value="Europe">Europe</option>
    <option value="Oceania">Oceania</option>
    <option value="North America">North America</option>
    <option value="South America">South America</option>
  </select>
  <h3>Your Selected Region:</h3>
  <p class="selectedValue"></p>
</div>

CSS

html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    width: 60%;
    display: flex;
    gap: 2rem;
}

#select {
    text-align: center;
}

p {
    margin-top: 25px;
}

JS

let selectedItem = document.querySelector("#select");
let selectedValue = document.querySelector(".selectedValue");

selectedItem.addEventListener('change', function () {
    selectedValue.innerHTML = this.value
})

If you use arrow function, remember that ‘this’ will point to window.

selectedItem.addEventListener('change', () => {
    selectedValue.innerHTML = selectedItem.value
})

You can use event.target to get selected value.

selectedItem.addEventListener('change', function (e) {
    selectedValue.innerHTML = e.target.value
})