Publicado em 9 de ago.

Liberar elemento ou div ao selecionar uma opção

Caros Amigos,

Estou com uma dúvida que me atormenta tem uma semana e simplesmente travei por não conseguir resolver.

	Tenho um site onde o cliente vai escolher, através de um formulário de registro, se ele vai necessitar ou não de um traslado até o evento. Caso ele escolha "Não", nada acontece. Caso ele escolha "Sim", eu quero que apareça o outro select com as opções de hotéis de onde ele vai se hospedar para pegar o traslado. Pois bem, eis meu código na parte de formulário:

	 

<div class="col-md-6">
	<div class="form-group">
 <select class="form-control" name="traslado" id="traslado">
 <option value="">Necessita Traslado?*</option>
 <option value="Sim">Sim</option>
 <option value="Não">Não</option>
 </select>
	</div>
</div>

<div class="col-md-6" id="teste">
 <div class="form-group" style="display:none;">
 <select class="form-control" name="hotel" id="hotel">
 <option value="0">Se Sim, escolha o Hotel de Origem*</option>
 <option value="SleepIn Jacarei">SleepIn Jacareí</option>
 <option value="Ibis Jacarei">Íbis Jacareí</option>
 <option value="Ibis SJC">Ibis SJC</option>
 <option value="Novotel SJC">Novotel SJC</option>
 </select>
 </div>
</div>

	 

	Percebam que, ao responder "Sim" para a opção de "Traslado" eu quero que as opções de "Hoteis" apareçam juntamente com o outro grupo de select "form-control". 

	Pensei em duas formas de trabalhar:

	A primeira seria manipulando a div do "form-control" relativo aos hoteis, ela fica oculta e ao clicar em Sim em "Traslado" ela aparece. (Tentei fazer, sem sucesso.)

	A outra seria manipular o style "display:none", enfim, uma idéia que me ocorreu. 

	 

	Fiz uns códigos em JavaScript porém nenhum funcionou, o que cheguei mais perto foi sumir o formulário todo.

	Se alguém puder dar alguma dica e/ou solução ficarei enormemente agradecido. 

	Att,

	![imagem](https://forum.imasters.com.br/monthly_2019_08/Traslado.png.a5a186df34d994a541a92193d4830d82.png)

Discussão (2)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

carloshss· 10 de ago.

Olá, Akahs. Fiz esse código aqui para esse problema.

// Pega o elemento para escutar a mudança de valor
const translado = document.getElementById('traslado');
// Pega pai do elemento que desejo alterar (poderia ser o proprio elemento tambem)
const hotelParentElement = document.getElementById('hotel').parentElement;

// Adiciona o ouvinte do tipo "change"

translado.addEventListener('change', trasladoElement => {
	// Verifica se o valor eh "Sim", se for, remove a classe que deixa invisivel
 // Se nao for "Sim", adiciona a classe novamente
	if(trasladoElement.target.value === 'Sim') {
 hotelParentElement.classList.remove('d-none');
 }
	else {
 hotelParentElement.classList.add('d-none');
 }
});

	 

	Utilizei a própria classe "d-none" do bootstrap para deixar o elemento invisível.

	DEMO: [https://jsfiddle.net/qkz3d8bp/](https://jsfiddle.net/qkz3d8bp/)

gabrielms· 10 de ago.

@Akahs Tenta isso aqui deve funcionar. Eu tbm fiz algumas modificações no html.

HTML:

<div class="col-md-6">
 <div class="form-group">
 <select class="form-control" name="traslado" id="traslado">
 <option value="false" selected disabled>Necessita Traslado?*</option>
 <option value="true">Sim</option>
 <option value="false">Não</option>
 </select>
 </div>
 </div>
 <div class="col-md-6">
 <div class="form-group" style="display:none;">
 <select class="form-control" name="hotel" id="hotel">
 <option value="0" selected disabled>Se Sim, escolha o Hotel de Origem*</option>
 <option value="SleepIn Jacarei">SleepIn Jacareí</option>
 <option value="Ibis Jacarei">Íbis Jacareí</option>
 <option value="Ibis SJC">Ibis SJC</option>
 <option value="Novotel SJC">Novotel SJC</option>
 </select>
 </div>
 </div>

	Javascript:

 var select1, select2;

 window.onload = function()
 {
 select1 = document.getElementsByName("traslado")[0];
 select2 = document.getElementsByName("hotel")[0];

 select1.addEventListener("change", function()
 {
 if (this.value == "true")
 {
 select2.parentElement.style.display = "block";
 }
 else
 {
 select2.parentElement.style.display = "none";
 select2.getElementsByTagName("option")[0].selected = true;
 }
 });
 }

	Caso você queira usar Jquery:

$(function()
 {
 $("[name=traslado]").on("change", function()
 {
 if($(this).val() == "true")
 {
 $($("[name=hotel]").parent()[0]).css("display", "block");
 }
 else
 {
 $($("[name=hotel]").parent()[0]).css("display", "none");
 $($("[name=hotel]").children()[0]).prop("selected", true);
 }
 });
 });