Estoy tratando de mostrar divs ocultos basados en una selección desplegable múltiple.
Aquí está la página HTML
<select id="vehicle"> <option="bike">Bike</option> <option="car">Car</option> </select> <select id="electric"> <option="yes">Yes</option> <option="no">no</option> </select> <div id="car_text"> <input type="text"> </div> <div id="bike_text"> <input type="text"> </div>Y esto es jquery que estoy tratando de hacer pero sigo fallando
$(document).ready(function () { $("#vehicle, #electric").change(function () { $("#vehicle, #electric").find("option:selected").each(function () { var vehicleSelect = $("#vehicle").attr("value"); var electricSelect = $("#electric").attr("value"); if (vehicleSelect == "car" && electricSelect == "yes") { $("#car_text").show(); $("#bike_text").hide(); } else { $("#car_text").hide(); $("#bike_text").show(); } }); });});
Gracias por la ayuda
Puedes hacerlo así:
$(document).ready(function() { $("#vehicle, #electric").change(function() { var vehicleSelect = $("#vehicle").val(); var electricSelect = $("#electric").val(); $("#car_text").toggle(vehicleSelect == "car" && electricSelect == "yes") $("#bike_text").toggle(vehicleSelect == "bike" && electricSelect == "yes") }); }); No hay razón para recorrer cada opción. En segundo lugar, debe usar $("#vehicle").val() no $("#vehicle").attr("value")
Manifestación
$(document).ready(function() { $("#vehicle, #electric").change(function() { var vehicleSelect = $("#vehicle").val(); var electricSelect = $("#electric").val(); $("#car_text").toggle(vehicleSelect == "car" && electricSelect == "yes") $("#bike_text").toggle(vehicleSelect == "bike" && electricSelect == "yes") }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="vehicle"> <option value="bike">Bike</option> <option value="car">Car</option> </select> <select id="electric"> <option value="yes">Yes</option> <option value="no">no</option> </select> <div id="car_text"> <input type="text" value="car"> </div> <div id="bike_text"> <input type="text" value="bike"> </div> $(document).ready(function() { $("#vehicle").change(function() { var vehicle = $('#vehicle').find(":selected").val(); if (vehicle == 'bike') { $("#car_text").addClass('d-none'); $("#bike_text").removeClass('d-none'); } if (vehicle == 'car') { $("#bike_text").addClass('d-none'); $("#car_text").removeClass('d-none'); } }); }); .d-none { display: none; } <html> <body> <select id="vehicle"> <option value="bike">Bike</option> <option value="car">Car</option> </select> <select id="electric"> <option value="yes">Yes</option> <option value="no">no</option> </select> <div id="car_text" class="d-none"> <input type="text" placeholder="car"> </div> <div id="bike_text" class="d-none"> <input type="text" placeholder="bike"> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"> </script> </body> </html>