JSFiddle - React, Tailwind, and code Playground

by StepBaro

HTML

<input id="createOption" type="button" value="create select" onclick="createOption();return false;" />
<br/>
    <div id="pageContainer" style="display:none;">
        <select id="pages" style="cursor:pointer;">
            <option>Please make a choice</option>
        </select>
    </div>
<br/>
<input id="addOption" style="display:none;" type="button" value="Insert option" onclick="newOption(prompt('Insert a value'));" />

CSS

button {
	display:inline-block;
}

JavaScript

function createOption() {
    
    
	var pageContainer = document.getElementById('pageContainer');
	var btnCreate = document.getElementById('createOption');
	var btnAdd = document.getElementById('addOption');
	
	btnCreate.style.display = 'none';
	btnAdd.style.display = '';
	pageContainer.style.display = 'block';

	var pages = document.getElementById('pages');
	// new Option([the text to show], [the value of option], [boolean, defaultSelected], [boolean, selected or not]);
	// pages.add([the Option object], position);
	pages.add(new Option('The first text', 'the value', true, true), 0); 
	
	
}
count = 0;

function newOption(newValue) {
	count++;
	var pages = document.getElementById('pages');
	if (confirm('Is the default value ?')) {
		pages.add(new Option('The text n°' + count + ' value ' + newValue, newValue, true, true), 0); 
	} else {
		pages.add(new Option('The text n°' + count + ' value ' + newValue, newValue, false, false), 0); 
	}
    
}