How to display hidden form field based on select box choice

Question

I want from the first dropdown when i select top to open the c92 dropdown and when i select low to open the c97 dropdown with bootstrap.

I don't want to have breaks between the hidden lists. Any thoughts?

<div class="form-group c86 required" data-cid="c86">
   <label class="control-label" for="c86">Product</label>
   <div class="input-group">
      <span class="input-group-addon left"><i class="fa fa-product-hunt"></i> </span>
      <select class="form-control" id="c86" name="c86" data-rule-required="true">
         <option value="">- Select -</option>
         <option value="top">top</option>
         <option value="low">low</option>
      </select>
   </div>
</div>
<div class="form-group c92 " data-cid="c92">
   <label class="control-label" for="c92" style="display: none">Mattress</label>
   <div class="input-group">
      <span class="input-group-addon left"><i class="fa fa-check-circle"></i> </span>
      <select class="form-control" id="c92" name="c92" style="display: none">
         <option value="">- Select -</option>
         <option value="One">One</option>
         <option value="Two">Two</option>
         <option value="Three">Three</option>
      </select>
   </div>
</div>
<div class="form-group c97 " data-cid="c97">
   <label class="control-label" for="c97" style="display: none">Sofa</label>
   <div class="input-group">
      <span class="input-group-addon left"><i class="fa fa-circle-o"></i> </span>
      <select class="form-control" id="c97" name="c97" style="display: none">
         <option value="">- Select -</option>
         <option value="One">One</option>
         <option value="Two">Two</option>
         <option value="Three">Three</option>
      </select>
   </div>
</div>

Answer 1

Is this something like what your after?.

ps: You can run the code snippet..

var 
  c86 = $('#c86'),
  c92 = $('#c92');

function selChange() {
  var 
    v = c86.find('option:selected').val(),
    vtop = c92.find('option:selected').val();
  $('[data-cid=c92]').toggleClass('hidden',
    v !== 'top');
  $('[data-cid=c97]').toggleClass('hidden',
    v !== 'low');
  console.log(vtop, v);
  $('[data-cid=c_one]').toggleClass('hidden',
    !(v === 'top' && vtop === 'One'));                               
}

c86.change(selChange);
c92.change(selChange);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="form-group c86 required" data-cid="c86">
  <label class="control-label" for="c86">Product</label>
  <div class="input-group"><span class="input-group-addon left"><i class="fa fa-product-hunt"></i> </span>
    <select class="form-control" id="c86" name="c86" data-rule-required="true">
      <option  value="">- Select -</option>
      <option  value="top">top</option>
      <option  value="low">low</option>
    </select>
  </div>
</div>




<div class="hidden form-group c92 " data-cid="c92">
  <label class="control-label" for="c92">Mattress</label>
  <div class="input-group"><span class="input-group-addon left"><i class="fa fa-check-circle"></i> </span>
    <select class="form-control" id="c92" name="c92">
      <option  value="">- Select -</option>
      <option  value="One">One</option>
      <option  value="Two">Two</option>
      <option  value="Three">Three</option>
    </select>
  </div>
</div>

<div class="hidden form-group c97 " data-cid="c97">
  <label class="control-label" for="c97">Sofa</label>
  <div class="input-group"><span class="input-group-addon left"><i class="fa fa-circle-o"></i> </span>
    <select class="form-control" id="c97" name="c97">
      <option  value="">- Select -</option>
      <option  value="One">One</option>
      <option  value="Two">Two</option>
      <option  value="Three">Three</option>
    </select>
  </div>
</div>

<div class="hidden form-group c_one " data-cid="c_one">
  <label class="control-label" for="c_one">Test 2</label>
  <div class="input-group"><span class="input-group-addon left"><i class="fa fa-circle-o"></i> </span>
    <select class="form-control" id="c_one" name="c_one">
      <option  value="">- Select -</option>
      <option  value="A">Top One</option>
      <option  value="B">Was</option>
      <option  value="C">Selected</option>
    </select>
  </div>
</div>

Answer 2

Put the id on the div wrapper and hide it, use onchange event to call the function displayForm, when the select changes it checks the value and then shows/hides the wrappers elements by id.

function displayForm(elem){
   if(elem.value == "top") {
     document.getElementById('c97').style.display = "none";
      document.getElementById('c92').style.display = "block";
    } else {
      document.getElementById('c92').style.display = "none";
      document.getElementById('c97').style.display = "block";
    }
}

<div class="input-group"><span class="input-group-addon left"><i class="fa fa-product-hunt"></i> </span>
<select class="form-control" onchange="displayForm(this)" id="c86" name="c86" data-rule-required="true"
  <option  value="">- Select -</option>
  <option  value="top">top</option>
  <option  value="low">low</option>

  </select>
</div>

</div>

<div id="c92" style="display: none" class="form-group c92 " data-cid="c92">
  <label class="control-label" for="c92" >Mattress</label>

<div class="input-group"><span class="input-group-addon left"><i class="fa fa-check-circle"></i> </span>
<select class="form-control"  name="c92"   
    >
  <option  value="">- Select -</option>
  <option  value="One">One</option>
  <option  value="Two">Two</option>
  <option  value="Three">Three</option>
  </select>
</div>

</div>

<div id="c97" class="form-group c97 " style="display: none" data-cid="c97">
  <label class="control-label" for="c97" >Sofa</label>

<div class="input-group"><span class="input-group-addon left"><i class="fa fa-circle-o"></i> </span>
<select class="form-control"  name="c97" 
    >
  <option  value="">- Select -</option>
  <option  value="One">One</option>
  <option  value="Two">Two</option>
  <option  value="Three">Three</option>
  </select>
</div>

</div>