選択したボックスの選択に基づいて隠しフォームフィールドを表示する方法

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

時に選択し、divのラッパーにIDを入れて、それを隠す、機能displayFormを呼び出すためにonchangeイベントを使用変更すると、値をチェックして、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>