показ блоков из комбинации select и radio

by foxss

HTML

<div class="form">
  <div id="parametrs">
    <select>
      <option value="blok1" selected="selected">показать блок 1 и в нем выбрать показ блока 2)</option>
      <option value="blok2">показать только блок 1 (выбор в блоке 1 не влияет на показ блока 2</option>
      <option value="blok3">не показывать блоки</option>
      <option value="blok4">показать блок 2</option>
    </select>
  </div>
  <div id="div1" class="hide">
    <b>Это блок DIV1</b>
    <br>
    <br>
    <label>
      <input type="radio" name="divs1" value="vb2">Показать блок 2</label>
    <br>
    <label>
      <input type="radio" name="divs1" value="nvb2" checked="checked">Скрыть блок 2</label>
    <br>
  </div>
  <div id="div2" class="hide">
    <b>Это блок DIV2</b>
    <br>
    <br>
    <label>
      <input type="radio" name="divs2" value="v1">Выбор 1</label>
    <br>
    <label>
      <input type="radio" name="divs2" value="v2" checked="checked">Выбор 2</label>
    <br>
  </div>
</div>

CSS

.form {
  margin: 10px;
}
div#div1 {
  background: white;
  width: 300px;
  margin-top: 10px;
  padding: 10px
}
div#div2 {
  background: yellow;
  width: 300px;
  margin-top: 10px;
  padding: 10px
}
.hide {
  display: none;
}
b {
  background: #f3f5f6;
  padding: 3px;
}
select{
    padding: 3px;
}
b,
select,
#div1,
#div2 {
  border-radius: 5px;
  border: gray 1px solid
}

JavaScript

$('#parametrs select').change(function() {
  $('.hide').hide(300);
  $out = $(this).val();
  //если в div1 есть выбор
  if (($out != 'blok3') && ($out != 'blok4')) {
    $('#div1').show(300);
  } else {
    $('#div1 input:radio[value="У работодателя"]').prop('checked', 'checked');
  }
  //если div2  есть выбор и в div1 "показать блок 2"
  if ($out == 'blok4') {
    $('#div2').show(300);
    $('#div1 input:radio[value="У работодателя"]').prop('checked', 'checked');
  }
  //если div2 "выбор 2". и в div1 "скрыть блок 2"
  if ($out == 'blok3') {
    $('#div2 input:radio[value="Без проживания"]').prop('checked', 'checked');
    $('#div1 input:radio[value="У работодателя"]').prop('checked', 'checked');
  }
  //если div2 "выбор 2". и в div1 есть выбор
  if ($out == 'blok2') {
    $('#div2 input:radio[value="Без проживания"]').prop('checked', 'checked');
  }
  if ($out == 'blok1') {
    $('#div1 input').change(function() {
      $outs = $(this).val();
      if (($outs == 'nvb2')||($out == 'blok1')) {
        if ($('#div1 input:radio[value="vb2"]').prop('checked')) {
          $('#div2').show(300);
          $outs.clearQueue();
return true;
      } else {
        $('#div2').hide(300);
        $('#div2 input:radio[value="v1"]').prop('checked', 'checked');
        $outs.clearQueue();
        }
      }
   } ).change();
  }
}).change().change(function() {
  $('.hide input:checkbox').removeAttr('checked');
});
//div2 end