0

Tenho um formulário dinâmico. Com um campo radiobutton e um select. De acordo com o valor que seleciono na opção eu populo o campo lista com valores selecionados.

Exemplo.

Opção 1 Opção 2

Ao selecionar a opção 1, o campo select é populado com Item A Item B Item C

Ao selecionar a opção 2, o campo select é populado com Item X Item W

Maior maior problema é como faço para inserir options dentro do select com JavaScript.

3
  • 1
    Bem-vindo ao StackOverflow Samuel. Por favor, poste um trecho do código que você já tem para termos uma ideia melhor do problema, sugiro que leia esse artigo da ajuda do site: Como criar um exemplo Mínimo, Completo e Verificável. 19/10/2018 às 17:42
  • você pode utilizar jQuery no seu projeto? ou tem de ser em JavaScript nativo sem bibliotecas. 19/10/2018 às 17:44
  • Olá Paulo. Não posso usar Jquery. Pois é um form dinâmico, e criou scripts com os elementos que criei na tela. O João resolveu na resposta mais abaixo. É basicamente daquela forma, só falta descobrir para ele não ficar somando enquanto eu alterno entre as opções. 19/10/2018 às 18:07

2 Respostas 2

5

Segue um exemplo amigo.. Após você selecionar uma opção, os options são criados dinamicamente. A cada alteração do radio os options mudam, refletindo somente os valores desejados para aquela seleção.

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>

1
  • Obrigado meu amigo!!! Testei os códigos e funcionaram também. 19/10/2018 às 19:10
2

Fiz um pequeno exemplo aqui utilizando somente JavaScript. Veja:

[...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>

Observações:

  • O algoritmo possui compatibilidade com a maioria dos navegadores, mas provavelmente não funcionará no IE por usar ES6.
6
  • 1
    Ah que legal cara. É isso mesmo!!!!. Só teria que descobrir como faz pra ele não ficar somando as opções ao ficar alternando entre as opções. 19/10/2018 às 18:06
  • Vou fazer aqui agora :D 19/10/2018 às 18:07
  • @samueltomkelski alterado! Se a minha resposta te ajudou ou serviu como resposta não esqueça de marcar como resposta! 19/10/2018 às 18:12
  • recomendo utilizar o evento change ao invés do evento click por vários motivos. 19/10/2018 às 18:15
  • 1
    Uma dica é colocar o valor do atributo value no html dos input[type=radio] como 2 e 3 e na terceira linha do código javascript você chamar diretamente a função createOptions(this.value) :D 19/10/2018 às 18:49

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .