There are numerous ways to dynamically populate select options, but I will demonstrate one of the simplest ways to accomplish this. This method involves the formation of a template string that contains a bunch of option elements and adding that template string as HTML to the existing select element.
In the following example, we have one empty select element and upon button click, we will dynamically add some options to it. Please have a look over the code example and the steps given below.
HTML & CSS
We have a few elements in the HTML file (div, button, and select). The div element with a class of container is just a wrapper for the rest of the elements.
The inner text for the button element is “Populate”.
We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.