如何根據選擇框選擇顯示隱藏的表單字段

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

這就像你之后的事嗎？

ps：你可以運行代碼片段..

 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

將id放在div包裝器上並隱藏它，使用onchange事件調用函數displayForm ，當select更改它檢查值然后按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>