如何根据选择框选择显示隐藏的表单字段

Question

当我选择顶部打开 c92 下拉列表时，我想从第一个下拉列表中 当我选择低以使用引导程序打开 c97 下拉菜单时。

我不想在隐藏列表之间有中断。有什么想法吗？

<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

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>  

Answer 2

这和你追求的一样吗？

ps：可以运行代码sn-p..

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>