Скриване и показване на опции при SELECT

Lenor

Registered
Здравейте опитвам се когато избера само Апартамент, да излиза под меню Гарсониера или Двустаен, но нещо не се получава

Код:
        <select class="form-control-data">
        <option value="" disabled selected>Тип жилище</option>
        <option onclick="on_question_switched_1();" id="stai" value="Апартамент">Апартамент</option>
        <option value="Офис">Офис</option>
        </select>

<select id="skrit">
        <option value="Гарсониера">Гарсониера</option> 
        <option value="Двустаен ">Двустаен</option>>
        </select>

<script type="text/javascript">
function on_question_switched_1(){
 if(document.getElementById('stai').checked){
  document.getElementById('skrit').style.
display='block';
 }else{
  document.getElementById('skrit').style.
display='none';
 }
}
on_question_switched_1();
</script>
 
onclick не е добра идея, тъй като option може да бъде цъкнато дори и да е бил селектиран преди това. По-добре ползвай onchange на селекта.

Код:
<select class="form-control-data" onchange="on_change()" id="type">
  <option value="" disabled selected>Тип жилище</option>
  <option value="Апартамент">Апартамент</option>
  <option value="Офис">Офис</option>
</select>

<select id="skrit" style="display: none;">
  <option value="Гарсониера">Гарсониера</option>
  <option value="Двустаен ">Двустаен</option>
</select>
<script>
  var on_change = function() {
    var select = document.getElementById("type");
    var value = select.options[select.selectedIndex].value;
    if (value === 'Апартамент') {
      document.getElementById('skrit').style.display = 'block';
    } else {
      document.getElementById('skrit').style.display = 'none';
    }
  }
</script>
 

Горе