Liberar elemento ou div ao selecionar uma opção

[Akahs 0]

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,

[carloshss 0]

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/

[gabrielms 0]

@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);
                    }
                });
            });