I'm attempting to create an HTML/CSS/JS form to be used offline.
So far, I've created the show() and hide() for div functionality based on a selection.
If Cloth & White are selected show one div but I can't get it to work.
Here is my attempt below:
if ($("#StartSelector").val() == "Cloth") &&
if ($("#ColourField").val() == "White") {
$('#Program').show();
else {
$('#Program').hide();
}
};form {
max-width: 900px;
display: block;
margin: 0 auto;
}<form>
<div class="form-group">
<label for="StartSelector">What are you washing?</label>
<select class="form-control" id="StartSelector">
<option value="no">Select wash option</option>
<option value="Cloth">Table Cloth & Napkins</option>
<option value="HeavyDuty">Heavy Duty Work Wear</option>
<option value="Kitchen">Kitchen Work Wear</option>
<option value="Bed">Bed Linen</option>
<option value="Curtains">Curtains</option>
<option value="Bath">Bath Towels & Robes</option>
<option value="Uniforms">Uniforms</option>
<option value="Personal">Personal Clothing</option>
<option value="Mops">Mops & Cleaning Textiles</option>
<option value="Low">Filter for low temperatures</option>
</select>
</div>
<div class="form-group" id="Colours">
<label for="ColourDiv">Types of wash.</label>
<select class="form-control" id="ColourField">
<option value="no">Select wash option</option>
<option value="White">White</option>
<option value="Colours">Colours</option>
<option value="Delicate">Delicate</option>
</select>
</div>
<div class="form-group" id="Program" style="display: none;">
<img src="Program1.png" alt="Program 1" width="auto" height="400">
</div>
</form>Updated: Thank's TiiJ7 and freedomn-m for comments and suggestions
You must search by value and not by option text.
The function had an if inside an if after the && operator so adjustments were needed.
You must have a listener to capture the changes in these select and make comparisons.
I assume you have already added the jquery library to your project.
function myFunction() {
if ($('#StartSelector :selected').val() == 'Cloth' &&
$('#ColourField :selected').val() == 'White') {
$('#Program').show();
} else {
$('#Program').hide();
}
}
$(function() {
$('#StartSelector, #ColourField').on('change', myFunction);
});form {
max-width: 900px;
display: block;
margin: 0 auto;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<form>
<div class="form-group">
<label for="StartSelector">What are you washing?</label>
<select class="form-control" id="StartSelector">
<option value="no">Select wash option</option>
<option value="Cloth">Table Cloth & Napkins</option>
<option value="HeavyDuty">Heavy Duty Work Wear</option>
<option value="Kitchen">Kitchen Work Wear</option>
<option value="Bed">Bed Linen</option>
<option value="Curtains">Curtains</option>
<option value="Bath">Bath Towels & Robes</option>
<option value="Uniforms">Uniforms</option>
<option value="Personal">Personal Clothing</option>
<option value="Mops">Mops & Cleaning Textiles</option>
<option value="Low">Filter for low temperatures</option>
</select>
</div>
<div class="form-group" id="Colours">
<label for="ColourDiv">Types of wash.</label>
<select class="form-control" id="ColourField">
<option value="no">Select wash option</option>
<option value="White">White</option>
<option value="Colours">Colours</option>
<option value="Delicate">Delicate</option>
</select>
</div>
<div class="form-group" id="Program" style="display: none;">
<img src="Program1.png" alt="Program 1" width="auto" height="400">
</div>
</form>