Básicamente, estoy respondiendo la pregunta aquí, pero tal vez alguien tenga otra idea. Puede usar una función onpopstate, pero me parece mucho más simple de manejar y compatible con varios navegadores, incluso con navegadores antiguos.
Tengo un cuadro de selección desplegable que se completa con una consulta de base de datos. En este caso, solo ha encontrado una ciudad relevante. Seleccionar esa ciudad, lo que lleva al usuario a otra página, luego presionar el botón Atrás, regresa al usuario a la página con la selección aún en el estado seleccionado, lo que evita que se vuelva a seleccionar, a menos que se haga otra selección primero. Así que agregué un evento onClick para cambiar el valor predeterminado seleccionado antes de salir de la página.
HTML
<div> <select class="DropList" name="CitySelect" id="CitySelect" onchange="if(options[selectedIndex].value){location = options[selectedIndex].value}" onclick="GetSelect()"> <option value="" selected>Select City</option> <option value="city.php?s=Montana&cn=Yellowstone&CalNav=0&c=Billings">Billings</option> </select> </div>JavaScript
<script type="text/javascript"> function GetSelect() { document.getElementById('CitySelect').value = ""; } </script>Escuchar el evento de clic no es ideal por un par de razones:
Entonces, en su lugar, sugiero usar el evento de desenfoque:
$('#CitySelect').on('blur', (e) => (e.target.value = ''));Inmediatamente después de seleccionar el valor, el campo de selección aún tendrá el nuevo valor, pero tan pronto como deje el campo ("difuminarlo"), el valor se restablecerá.
Mira este violín