My HTML select element has a few options to choose from:
<select class="form-control" data-val="true" data-val-number="The field
CodeSetup must be a number." id="CodeSetup" name="CodeSetup">
<option selected="selected" value="0">AllCodes</option>
<option value="1">ClientCodes</option>
<option value="2">EmployeeClass</option>
</select>
<div id="eeclass">
<div class="row setup-code-edit">
<label class="control-label col-md-5 label-blue-small" for="EEClassCodes">EEClassCodes</label>
<div class="col-md-7">
<input class="form-control" id="EEClassCodes" name="EEClassCodes" type="text" value="">
<span class="field-validation-valid text-danger" data-valmsg-for="EEClassCodes" data-valmsg-replace="true"></span>
</div>
</div>
</div>
I have created a script that will display a specific field when a certain option is selected in the dropdown menu. Here's how it works:
$(document).ready(function() {
$('#eeclass').hide();
$("#CodeSetup").change(function () {
$('#eeclass').show();
});
})
However, I noticed that the field is always displayed whenever an option is selected, regardless of which one. I need to make it so that the field only shows up when "EmployeeClass" is chosen (value="2"). Additionally, I want the field to disappear when another option is selected instead. I tried using toggle but couldn't get it to work correctly.