I have individual div elements for each type of clothing item (shirt, pant, suit) that I want to display when the corresponding service is selected. This means that when I click on one of them, only that specific div will be shown. I am looking for a solution using JQuery. TIA
$(function(){
$('#selectService').change(function() {
alert($(this).val());
// I want to display the respective div(s) instead of showing alerts, based on which option is clicked
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="orderClone" class="row">
<div class="table-responsive">
<table class="table table-striped">
<tr>
<th>Service</th>
</tr>
<tr>
<td>
<select id="selectService" name="service[]" class="form-controlservice">
<option disabled="" selected="">Select Service</option>
<option id="one" value="shirt">Shirt</option>
<option value="pant">Pant</option>
<option value="suit">Suit</option>
</select>
</td>
</tr>
</table>
</div>
</div>
<div class="col-md-4">
<h4><b>Shirt</b></h4>
<hr/>
<div class="form-group required">
<label class="control-label">Body</label>
<input type="text" class="form-control" name="body" />
</div>
<div class="form-group required">
<label class="control-label">Shoulder</label>
<input type="text" class="form-control" name="shoulder" />
</div>
<div class="form-group required">
<label class="control-label">Neck</label>
<input type="text" class="form-control" name="neck" />
</div>
</div>
<div class="col-md-4">
<h4><b>Pant</b></h4>
<hr/>
<div class="form-group required">
<label class="control-label">Length</label>
<input type="text" class="form-control" name="length" />
</div>
<div class="form-group required">
<label class="control-label">Thigh</label>
<input type="text" class="form-control" name="thigh" />
</div>
</div>
<div class="col-md-4">
<h4><b>Suit</b></h4>
<hr/>
<div class="form-group required">
<label class="control-label">Name</label>
<input type="text" class="form-control" name="length" />
</div>
<div class="form-group required">
<label class="control-label>Name</label>
<input type="text" class="form-control" name="thigh" />
</div>
</div>
I tried using change() for each service in the select element but couldn't figure out how to include the div(s) for the shirt. Ideally, when I select 'shirt' from the service dropdown, I want the 'shirt' div to be displayed.