I have a dynamic form. With a radiobutton field and a select . According to the value that I select in the option I populate the field list with values selected.
Example.
Option 1 Option 2
When you select option 1, the select field is populated with Item A Item B Item C
When you select option 2, the select field is populated with Item X Item W
The biggest problem is how to insert options into select with JavaScript.
I made a small example here using only JavaScript. See:
[...document.getElementById('form').elements].forEach((field) => {
field.addEventListener('change', () => {
if (field.value === 'opcao2') {
createOptions(2);
} else {
createOptions(3);
}
});
});
function createOptions(quantidade) {
let fieldSelect = document.getElementById('select');
cleanOptionsSelect(fieldSelect);
for (let i = 0; i < quantidade; i++) {
let option = document.createElement('option');
option.text = 'Opção ' + i;
fieldSelect.append(option);
}
}
function cleanOptionsSelect(fieldSelect) {
fieldSelect.innerHTML = '<option value="valor1">Selecione uma opção</option>';
}<form id="form">
<input type="radio" id="opcao1" name="opcao" value="opcao1" />
<label for="opcao1">Opção 1</label>
<input type="radio" id="opcao2" name="opcao" value="opcao2" />
<label for="opcao2">Opção 2</label>
</form>
<fieldset>
<legend>Campo select</legend>
<select name="select" id="select">
<option value="valor1">Selecione uma opção</option>
</select>
</fieldset>Comments:
Here's a friend example. After you select an option, the options are created dynamically. With each radio change, the options change, reflecting only the desired values for that selection.
function populateOptions(opt) {
let select = document.querySelector("select[name='selecao']");
while (select.children.length) {
select.removeChild(select.lastChild);
}
// Cria option "default"
let defaultOpt = document.createElement('option');
defaultOpt.disabled = true;
defaultOpt.selected = true;
defaultOpt.textContent = 'Selecione uma opção';
select.appendChild(defaultOpt);
opt.forEach(function(option) {
let optEl = document.createElement('option');
optEl.value = option.value;
optEl.textContent = option.text;
select.appendChild(optEl);
});
}
document.querySelectorAll("input[type='radio']")
.forEach(function(radio) {
radio.addEventListener('change', function(evt) {
switch (parseInt(this.value)) {
case 1:
populateOptions([{
value: "A",
text: "Opção A"
},
{
value: "B",
text: "Opção B"
}
]);
break;
case 2:
populateOptions([{
value: "C",
text: "Opção C"
},
{
value: "D",
text: "Opção D"
}
]);
break;
}
});
});<label>
Opção 1
<input type="radio" name="opt" value="1">
</label>
<label>
Opção 2
<input type="radio" name="opt" value="2">
</label>
<select name="selecao">
<option disabled selected>Selecione uma opção</option>
</select>