Show slect if previous select receives value

Question

I intend to create a select on my login page, but I intend to show the same only in case the select previous receive value. That one select which receives the first value, already depends on a checkbox, which is only visible if the checkbox be filled, I have this way:

<label for="check">Acesso Telemóvel</label>
<input type="checkbox" name="check" id="check" value="1"/>
<label for="hostaname">Indique Qual</label>
<select class="form-control" name="hostaname" id="hostaname" style="display:none">
<option></option>
<option value="ALA A">Telemóvel ALA A</option>
<option value="ALA B">Telemóvel ALA B</option>
<option value="RT + APOIO">Telemóvel RT + APOIO</option>
</select>


$("#check").click(function(){    
   $("#hostaname")[this.checked ? "show" : "hide"]();    
});

Now I intend to create a second checkbox in this way:

<label for="Turno">Indique Qual</label>
<select class="form-control" name="Turno" id="Turno" style="display:none" >
      <option></option>
      <option value="M">Turno Manhã</option>
      <option value="T">Turno tarde</option>
      <option value="N">Turno Noite</option>
</select>

But only visible if the select previous is completed

Answer 1

You can make a if/else very simple. Case no change of select previous the value be it == the value that you want you from display:block in the next select, else, you da disply:none in it.

In the example below if the value of the select previous for value == "RT + APOIO" you show the next select, if it’s another value you show nothing.

 $("#check").click(function(){    
   $("#hostaname")[this.checked ? "show" : "hide"]();    
});

const sel = document.getElementById('hostaname');

function mostra() {
  const xxx = document.getElementById('Turno');
  if (sel.value == "RT + APOIO") {
      xxx.style.display = "block";
    } else {
      xxx.style.display = "none";
    }
}

sel.addEventListener('change', mostra);

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<label for="check">Acesso Telemóvel</label>
<input type="checkbox" name="check" id="check" value="1"/>
<label for="hostaname">Indique Qual</label>
<select class="form-control" name="hostaname" id="hostaname" style="display:none">
<option></option>
<option value="ALA A">Telemóvel ALA A</option>
<option value="ALA B">Telemóvel ALA B</option>
<option value="RT + APOIO">Telemóvel RT + APOIO</option>
</select>


<label for="Turno">Indique Qual</label>
<select class="form-control" name="Turno" id="Turno" style="display:none" >
  <option></option>
  <option value="M">Turno Manhã</option>
  <option value="T">Turno tarde</option>
  <option value="N">Turno Noite</option>
</select>

Answer 2

You can use the same approach you used for the checkbox but this time when you select it to change value. Follow the example:

var myCheckbox$ = $('#myCheckbox');
var fooSelect$ = $('#fooSelect');
var barSelect$ = $('#barSelect');

myCheckbox$.on('click', function(e) {
  fooSelect$[e.target.checked ? 'show' : 'hide']();
});

fooSelect$.on('change', function(e){
  barSelect$[e.target.value ? 'show' : 'hide']();
});

#fooSelect, #barSelect {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>
  <label>
    <input type="checkbox" id="myCheckbox"/>
  </label>
  <div>
    <select id="fooSelect">
      <option value="">select</option>
      <option value="foo1">foo1</option>
      <option value="foo2">foo2</option>
    </select>
  </div>
  
  <div>
    <select id="barSelect">
      <option value="">select</option>
      <option value="bar1">bar1</option>
      <option value="bar2">bar2</option>
    </select>
  </div>
</form>