Как отобразить скрытое поле формы на основе выбора выбора окна

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

Это что-то вроде того, что ваш после ?.

пс: Вы можете запустить фрагмент коды ..

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

Поместите идентификатор на сОн обертке и скрыть его, используйте onchange событие для вызова функции displayForm, когда выберите он проверяет значение, а затем показывает/скрывает элементы обертки по 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>