DEV Community

Cover image for Dynamically create option in select element
Jharna Khatun
Jharna Khatun

Posted on

Dynamically create option in select element

There are two ways to create an option dynamically :

1) Using the Option constructor and add() method

2) Using the DOM methods

1) Using the Option constructor and add() method :

let newOption = new Option('Option Text','Option Value');
const select = document.querySelector('select'); 
select.add(newOption,undefined);
Enter fullscreen mode Exit fullscreen mode

2) Using the DOM methods :

// create option using DOM
const newOption = document.createElement('option');
const optionText = document.createTextNode('Option Text');
// set option text
newOption.appendChild(optionText);
// and option value
newOption.setAttribute('value','Option Value');

const select = document.querySelector('select'); 
select.appendChild(newOption);
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

SurveyJS custom survey software

JavaScript Form Builder UI Component

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay