Así que tengo un elemento de selección simple, que por supuesto contiene un montón de elementos de opción.

Estoy creando una función de búsqueda simple en un campo de entrada de texto, que básicamente oculta todos los elementos de opción dentro del elemento de selección que no contiene el texto de búsqueda. Esto funciona bien.

PERO, después de ocultar los elementos de opción necesarios y mostrar solo los que quiero, hay un error extraño con el menú desplegable. Cuando hago clic en el menú desplegable (seleccionar elemento) después de que se hayan realizado los cambios (ocultar y mostrar elementos de opción), está vacío en el primer clic. Pero si vuelvo a hacer clic en él, se actualiza correctamente con los elementos de opción visibles correctos.

Busqué y busqué y probé 20 cosas diferentes para resolver este pequeño problema molesto, pero no puedo entender por qué tengo que hacer clic en mi menú desplegable dos veces antes de que los cambios sean visibles.

¿Alguien puede arrojar algo de luz sobre esto u ofrecer una solución?

Aquí hay algo de código, los elementos de opción se crean dinámicamente en otro lugar, pero el código funciona bien para ocultar/mostrar los elementos de opción:

 var timeoutId2; $(document).on("input propertychange change", ".searchField", function() { clearTimeout(timeoutId2); var searchInput = $(this).val(); if (searchInput == "") { $(".monsterOption").css("display", "block"); } else { $(".monsterOption").css("display", "none"); timeoutId2 = setTimeout(function() { $(".monsterOption").each(function(i, ele) { var monstername = $(this).data("monstername"); if (monstername.toLowerCase().indexOf(searchInput.toLowerCase()) != -1) { $(".monsterDropdown").val(monstername); $(this).css("display", "block"); } }); }, 300); } });

 <input class="searchField" type="text" placeholder="search here"> <select class="monsterDropdown"> <option class="monsterOption" data-monstername="Car 1">Car 1</option> <option class="monsterOption" data-monstername="Car 2">Car 2</option> <option class="monsterOption" data-monstername="Plane 1">Plane 1</option> <option class="monsterOption" data-monstername="Boat 1">Boat 1</option> <option class="monsterOption" data-monstername="Boat 2">Boat 2</option> </select> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>