Блок в зависимости от выбора select

Иногда есть необходимость показать какое-либо содержимое в зависимости от выбранного пункта в выпадающем списке. С помощью события .change отслеживаем изменение в выпадающем списке:

HTML:

<select id="form">
    <option value="b1">Блок1</option>
    <option value="b2">Блок2</option>
</select>
 
<div id="p_b1" class="block" style="display:none">Текст</div>
<div id="p_b2" class="block" style="display:none">Текст 2</div>

jQuery:

$('#form').change(function(){
  $('div.block').slideUp();
  $('#p_'+$(this).val()).slideDown();
});

Второй вариант:

HTML:

<Select id="colorselector">
   <option value="red">Red</option>
   <option value="yellow">Yellow</option>
   <option value="blue">Blue</option>
</Select>
<div id="red" class="colors" style="display:none"> red... </div>
<div id="yellow" class="colors" style="display:none"> yellow.. </div>
<div id="blue" class="colors" style="display:none"> blue.. </div>

jQuery:

$(function() {
        $('#colorselector').change(function(){
            $('.colors').hide();
            $('#' + $(this).val()).show();
        });
    });

Третий вариант

jQuery:

$(document).ready(function(){
  $('#colorselector').on('change', function() {
    if ( this.value == 'red') {
      $("#divid").show();
    } else {
      $("#divid").hide();
    }
  });
});

Комбинированнный:

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12">
    <label for="cargo_name">Название груза</label>
        <select name="cargo_name" id="cargo_name" class="form-control">
            <option value="-----">----- ----</option>
            <option value="letter_300">Конверт до 300 гр.</option>
            <option value="docs">Документы</option>
            <option value="parcels">Посылки</option>
        </select>
</div>

<div class="col-md-12">
   <div  id="cargo_weight" >
    <label for="cargo_weight">Вес груза</label>
        <select name="cargo_weight" class="form-control">
           <option value="0.3">0.3</option>
           <option value="1">1</option>
           <option value="2">2</option>
        </select>
    </div>    
</div>

jQuery:

$(document).ready(function() {
 $('#cargo_name').change(function() {
  if($(this).val() === "docs" || $(this).val() === "parcels")
   {
    $("#cargo_weight").css("display", "block");
   }
   else
   {
    $("#cargo_weight").css("display", "none");
   }
 });
});

ещё

jQuery:

$('#select1').change(function(){
  var val = $(this).val();
  //если элемент с id равным значению #select1 существует
  if($('#' + val).length){
     //скрываем все селекты шага 2
    $('#step2 select').hide();
    //показываем нужный
    $('#' + val).show();
    //в противном случае, если значение равняется "all"
  }else if(val == 'all'){
    //показать все списки шага2
    $('#step2 select').show();
  }
})

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select1">
<option selected disabled>Выбирите</option>
<option value="select2_1">Список1</option>
<option value="select2_2">Список2</option>
<option value="all">Оба списка</option>
</select>

<div id="step2">
  <select id="select2_1">
<option selected disabled>Выбирите(список1)</option>
<option>А</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
  <select id="select2_2">
<option selected disabled>Выбирите(список2)</option>
<option>a</option>
<option>b</option>
<option>c</option>
<option>d</option>
</select>
</div>

CSS:

#step2 select{
  display:none;
}

Условия case:

HTML:

<select id="myselect">
    <option>Укажите вариант</option>
    <option value=1>1</option>
    <option value=2>2</option>
</select>
<div id="first" style="display:none">
    ваши элементы при варианте 1
</div>
<div id="second" style="display:none">
    ваши элементы при варианте 2
</div>

jQuery:

$(document).ready(function() {
    $('#myselect').on('change', function() {
      switch (this.value) {
        case "1":
          $('#first').show();
          $('#second').hide();
          break;
        case "2":
          $('#first').hide();
          $('#second').show();
          break;
        default:
          $('#first').hide();
          $('#second').hide();
          break;
      }
    });
  });