Tengo un formulario que permite al usuario seleccionar una opción de un menú desplegable
<form action="/create_tasks/" name="form2" , id="form2" method="post" class="row row-cols-lg-auto g-3 align-items-center"> <input type="hidden" name="csrfmiddlewaretoken" value="F9Xrs4SIcjDS3yVMCH1hbAB1p3encpExp14ynCZV5jsDgjcD41qFoVeDn4wtpGr8"> <div class="col-12"> <label class="visually-hidden" for="inlineFormSelectPref">Preference</label> <select class="form-select" id="inlineFormSelectPref"> <option selected value='all'>All </option> <option value=SQL>SQL</option> <option value=Apache Spark>Apache Spark</option> <option value=Python>Python</option> <option value=Linux>Linux</option> </select> </div> <div class="col-12"> <button type="submit" class="btn btn-primary">filter</button> </div> </form>Tengo divs debajo como este:
<div class="card mb-2 sh-10 sh-md-8 Python "> </div> <div class="card mb-2 sh-10 sh-md-8 Python "> </div>Si el usuario selecciona un valor del menú desplegable, solo quiero mostrar los divs con esa clase (por ejemplo, seleccione Python, solo muestre los divs de python). Si seleccionan 'todos', quiero mostrarlos a todos.
Tuve una jugada con algunas opciones pero no puedo hacer que funcione. ¿Puede alguien señalarme en la dirección correcta, por favor?
Puede agregar un detector de eventos de input en su campo de select . Esto se activará cada vez que cambie la opción en su select . Cuando se active este evento, simplemente lea el valor de select y muestre los divs en consecuencia.
const select = document.getElementById('select'); const showSelected = name => { document.querySelectorAll('.form-option').forEach(card => { card.style.display = name === 'all' ? 'block' : 'none'; if (name !== 'all' && card.classList.contains(name.replace(' ', '-'))) { card.style.display = 'block'; } }); } showSelected('all'); select.addEventListener('input', () => { showSelected(select.value); }); <select id="select"> <option selected value='all'>All</option> <option value="SQL">SQL</option> <option value="Apache Spark">Apache Spark</option> <option value="Python">Python</option> <option value="Linux">Linux</option> </select> <div class="form-option SQL">SQL</div> <div class="form-option Apache-Spark">Apache Spark</div> <div class="form-option Python">Python</div> <div class="form-option Linux">Linux</div>