Создаём select и radio со скрытыми блоками

Довольно часто приходится сталкиваться с созданием форм, где в зависимости от выбора юзера нужно показать/скрыть блок, например, с другим input. Ну не интересно обычному пользователю, что специалисту, компании, организации и тд нужно заполнить дополнительные поля. Поэтому делаем select и radio button со скрытыми блоками div!

Создаём select открывающий при выборе скрытые блоки

Начнём с JS. Тут всё исключительно просто. Пишем функцию Selected, где в зависимости от значения будут скрыты или показаны определённые блоки. При значении 1 - блок 1 показан, а блок 2 скрыт и так далее. Внимание! Всё равно важно указать состояние для ВСЕХ блоков, так как пользователь может перебирать варианты.

Код Java Script

<script>
function Selected(a) {
        var label = a.value;
        if (label==1) {
            document.getElementById("Block1").style.display='block';
            document.getElementById("Block2").style.display='none';             
        } else if (label==2) {
            document.getElementById("Block1").style.display='none';
            document.getElementById("Block2").style.display='block';   
        } else {
            document.getElementById("Block1").style.display='none';
            document.getElementById("Block2").style.display='none';
        }
         
}
</script>

Код сверху (Java Script) и код снизе (HTML) можно включить в body.

Код HTML

<select id="actSelect" class="Validate_Required " name="actSelect" aria-required="true" onChange="Selected(this)">
       <option value="" selected="selected">-</option>
       <option value="1">Скрытый блок с другим селектом</option>
       <option value="2">Обычный скрытый блок</option>
       <option value="3">Ничего не произойдёт</option>
</select>
     
    
    <div id='Block1' style='display: none;'>
      Выберите ещё что-нибудь:
      <select>
       <option value="" selected="selected">-</option>
       <option value="a">Вариант 1</option>
       <option value="b">Вариант 2</option>
       <option value="c">Вариант 3</option>
      </select>
    </div>

    <div id='Block2' style='display: none;'>
        Текст обычного скрытого блока
    </div>

    <p></p>
    <div>Текст не в скрытом блоке</div>

Готово. Смотрим работу.
Демонстрация Скачать исходники

Radio кнопки, открывающие при выборе скрытые блоки

По аналогии делам radio кнопки. При выборе также появляются скрытые блоки. Тут реализую короткую версию, так как радио кнопки обычно не подразумевают много вариантов. В противном случае смотрим код сверху с селектом.

Код Java Script

<script>
function Selected(a) {
  var label = a.value;
    if (label=="Open") {
       document.getElementById("Block1").style.display='block';
   } else {
       document.getElementById("Block1").style.display='none';
   } 
}
</script>

Код HTML

<p><label><input id="Dest" type="radio" name="user" value="None" aria-required="true" onChange="Selected(this)">Ничего не будет</label>
<label><input id="Dest" type="radio" name="user" value="Open" aria-required="true" onChange="Selected(this)">Покажи скрытый блок</label></p>

<div id='Block1' style='display: none;'>
Содержимое скрытого блока.
</div>

Демонстрация Скачать исходники
Тема со скрытыми блоками очень распространена и востребована, например, в формах регистрации, поэтому, думаю, что статья будет многим полезна!

Спасибо за внимание!