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.


<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>
  <h3>Your Selected Region:</h3>
  <p class="selectedValue"></p>


html {
    box-sizing: border-box;

*::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;


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 to get selected value.

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