Probablemente se haya preguntado por esto antes, pero después de varias horas de buscar, parece que no puedo encontrar nada.
Tengo una lista de datos que está destinada a mostrar un div en función de su selección de la lista de datos. Haga lo que haga, parece que no puedo encontrar la manera de hacerlo. Lo mejor que puedo hacer es hacer que ambas selecciones muestren uno de los divs, pero no mostrar divs específicos según la selección.
¿Cómo lo hago para elegir div1 mostrar div1, div2 muestra div2 y así sucesivamente?
var myinput = document.getElementById('example'); myinput.addEventListener("change", function() { var mydiv = document.getElementById('#div'); mydiv.style.display = (this.value === '' ? 'none' : 'inline'); }); .hidden { display: none; } <fieldset> <legend>This is a datalist</legend> <input type="text" id="example" list="brow" /> <datalist id="brow"> <option value="div1" /> <option value="div2" /> </datalist> </fieldset> <div class="hidden" id="div1">This is div1></div> <div class="hidden" id="div2">This is div2></div>su guión será así.
var myinput = document.getElementById('example'); var divs = document.querySelectorAll('.hidden'); myinput.addEventListener('change', function() { var mydiv = document.getElementById(this.value); divs.forEach(div => { div.style.display = div.id === this.value ? 'block' : 'none'; }); }); .hidden { display: none; } <fieldset> <legend>This is a datalist</legend> <input type="text" id="example" list="brow" /> <datalist id="brow"> <option value="div1" /> <option value="div2" /> </datalist> </fieldset> <div class="hidden" id="div1">This is div1></div> <div class="hidden" id="div2">This is div2></div>Si tiene un elemento seleccionado, elimine .hidden para mostrarlo.
De lo contrario, busque el div que no tiene .hidden y vuelva a agregar la clase para ocultarlo.
document.getElementById('example').addEventListener("change", () => { if(event.target.value){ document.getElementById(event.target.value).classList.remove("hidden"); } else{ document.querySelector(".somediv:not(.hidden)").classList.add("hidden"); } }); .hidden { display: none; } <fieldset> <legend>This is a datalist</legend> <input type="text" id="example" list="brow"/> <datalist id="brow"> <option value="div1"/> <option value="div2"/> </datalist> </fieldset> <div class="somediv hidden" id="div1">This is div1</div> <div class="somediv hidden" id="div2">This is div2</div>