0

Olá, estou tentando fazer um form no html onde contém DOIS selects required, porém irei usar apenas um de cada vez, ou seja quando eu selecionar um o outro required deveria passar "batido". A estrutura é a seguinte:

<form>
  <select required>//se esse for selecionado não precisaria selecionar o outro
    <option value="">
    <option value="1">1</option>
    <option value="2">2</option>
  </select>
  <select required>//da mesma forma se esse for selecionado o outro não precisa ser também.
    <option value="3">3</option>
    <option value="4">4</option>
  </select>
</form>

O resultado desse código não me deixa selecionar apenas 1 select, devo selecionar os dois para que funcione, ou seja eu gostaria de uma estrutura no estilo da lógica "OR" e não "AND" como ocorre aqui. Se tiver alguma forma de fazer isso sem JS seria melhor ainda.

OBS: Sim eu preciso de dois SELECTS para fazer isso por questão de intuitividade.

1 Resposta 1

1

A única solução que conheço é através de Javascript.

Criei um método que será executado toda vez que um de seus select for alterado, ele receberá o id e o value do elemento alterado.

Caso o elemento alterado possuir valor então o outro select perderá a sua obrigatoriedade.

Segue exemplo funcionando:

function removeObrigatoriedade(id, valor){
  var lista1 = document.getElementById("lista1");
  var lista2 = document.getElementById("lista2");
  
  if(id=="lista1" && valor != ""){
    lista1.required = true;
    lista2.required = false;
  }
  
  if(id=="lista2" && valor != ""){
    lista2.required = true;
    lista1.required = false;
  }
  
}
<form action="#">
  <select name="lista1" id="lista1" required onchange="removeObrigatoriedade(this.id, this.value)">
    <option value="">
    <option value="1">1</option>
    <option value="2">2</option>
  </select>
  <select name="lista2" id="lista2" required onchange="removeObrigatoriedade(this.id, this.value)">
    <option value="">
    <option value="3">3</option>
    <option value="4">4</option>
  </select>
  
  
  <button type="submit" name="enviar" id="enviar">Enivar</button>
</form>

2
  • Era exatamente isso, obrigado único problema do JS é que realmente nem sempre temos suporte ao mesmo infelizmente.
    – Wel
    15/01/2018 às 12:09
  • Entendo sua situação, fico feliz que tenha te ajudado :) 15/01/2018 às 12:18

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 .