Get the Selected Value of Select Box with JavaScript

In this article, I will introduce 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);