Estoy intentando crear un formulario HTML/CSS/JS para usarlo sin conexión.
Hasta ahora, he creado show() y hide() para la funcionalidad div basada en una selección.
Si se selecciona Cloth & White , se muestra un div , pero no puedo hacer que funcione.
Aquí está mi intento a continuación:
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>Actualizado: Gracias a TiiJ7 y freedomn-m por sus comentarios y sugerencias.
Debe buscar por valor y no por texto de option .
La función tenía un if dentro de un if después del operador && , por lo que se necesitaban ajustes.
Debe tener un oyente para capturar los cambios en estos select y hacer comparaciones.
Supongo que ya ha agregado la biblioteca jquery a su proyecto.
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>