Get the Selected Value of Select Box with JavaScript

In this article, you will learn how to get the selected value of select box with JavaScript.

Get the select box

The HTML used this time is as follows.

HTML

<form>
  <select name="selectbox">
    <option value="">--Select--</option>
    <option value="javascript">JavaScript</option>
    <option value="jquery">jQuery</option>
    <option value="html">HTML</option>
    <option value="css">CSS</option>
  </select>
</form>

Use the forms property to get only the select box from the form.

JavaScript

let form = document.forms[0];
let selectbox = form.selectbox;

console.log(selectbox);
//result
//<select name="selectbox">
//  <option value="">--Select--</option>
//  <option value="javascript">JavaScript</option>
//  <option value="jquery">jQuery</option>
//  <option value="html">HTML</option>
//  <option value="css">CSS</option>
//</select>

Get the selected value of select box

This time get the value when the selection of the select box is changed.

JavaScript

let form = document.forms[0];
let selectbox = form.selectbox;

selectbox.addEventListener('change', ()=> {
  console.log(selectbox.value);
}, false);