Insert Option with Java

Question

I have a dynamic form. With a field radiobutton and a select. According to the value I select in the option I populate the list field with selected values.

Example.

Option 1 Option 2

When selecting option 1, the select field is populated with Item A Item B Item C

When selecting option 2, the select field is populated with Item X Item W

Biggest problem is how to insert options within the select javascript.

Answer 1

Follow an example friend.. After you select an option, the options are created dynamically. With each radio change 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>

Answer 2

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>

Remarks:

• The algorithm is compatible with most browsers, but probably won’t work in IE by using ES6.