Sometimes, we want to get the change event for a datalist with JavaScript.

In this article, we’ll look at how to get the change event for a datalist with JavaScript.

How to get the change event for a datalist with JavaScript?

To get the change event for a datalist with JavaScript, we can listen to the input’s change event.

For instance, we write:

<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />

<datalist id="ice-cream-flavors">
  <option value="Chocolate">
  <option value="Coconut">
  <option value="Mint">
  <option value="Strawberry">
  <option value="Vanilla">
</datalist>

to add the input with a datalist with the options.

Then we write:

const input = document.querySelector('input')
input.onchange = (e) => {
  console.log(e.target.value)
}

to select the input with querySelector.

And then we set input.onchange to a function that logs the selected value.

As a result, when we select an option, we see the value attribute of the option element selected logged.

Conclusion

To get the change event for a datalist with JavaScript, we can listen to the input’s change event.