JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="col-sm-7">
<select class="selectpicker" name="productType" id="productType">
<option value=""></option>
<option value="Cereal">Cereal</option>
</select>
</div>
</div>
</div>
</div>
<div class="row hiddenRow" id="yearRow">
<div class="col-md-12">
<div class="form-group">
<div class="col-sm-7">
<select class="selectpicker" name="camYear" id="camYear">
<option value=""></option>
<option value="2016">2016</option>
</select>
</div>
</div>
</div>
</div>
<div class="row hiddenRow" id="monthRow">
<div class="col-md-12">
<div class="form-group">
<div class="col-sm-7">
<select class="selectpicker" name="camMonth" id="camMonth">
<option value=""></option>
<option value="March">March</option>
</select>
</div>
</div>
</div>
</div>
<div class="row hiddenRow" id="idRow">
<div class="col-md-12">
<div class="form-group">
<div class="col-sm-7">
<select class="selectpicker" name="camId">
<option value=""></option>
<option value="12345">12345</option>
...
CSS
.hiddenRow {
display: none;
}
JavaScript
$( "#productType" ).change(function() {
if($(this).val() != '') {
$('#yearRow').css('display', 'block');
} else {
$('#yearRow').css('display', 'none');
}
});
$( "#camYear" ).change(function() {
if($(this).val() != '') {
$('#monthRow').css('display', 'block');
} else {
$('#monthRow').css('display', 'none');
}
});