Seleccionar el menú que no se restaura cuando se usa el botón Atrás

Question

Considere una página web que tiene un menú de selección con un controlador de eventos JavaScript vinculado al evento onchange del menú que cuando se dispara recarga la página con una nueva cadena de consulta (utilizando el valor seleccionado en menú).

Edición: cuando el usuario pulsa el botón Atrás, el DOM página se restaura desde la memoria caché pero NO el estado del menú de selección.

navegadores afectados: Firefox y Safari (que utilizan una espalda/cache adelante)

Ejemplo:

<script language="javascript" type="text/javascript"> 
function reloadPage() { 
    var menu = document.getElementById("select1"); 
    var val = menu.options[menu.selectedIndex].value; 
    window.location.href = 'test.html?select1=' + val; 
} 
</script> 
<form action="#" method="get" name="form1"> 
    <select name="select1" id="select1" onChange="reloadPage();"> 
    <option value="A" selected>Option A</option> 
    <option value="B">Option B</option> 
    <option value="C">Option C</option> 
    <option value="D">Option D</option>   
    </select> 
</form> 

visualización de esta página y observe que la opción A se selecciona. Luego seleccione una opción diferente (por ejemplo, la opción C): la página se vuelve a cargar (con una cadena de consulta,? Select1 = C). Luego presione el botón Atrás - el menú de selección continúa mostrando la opción C como está seleccionado.

Pregunta: ¿Alguien sabe por qué el menú de selección no se restaura y cómo se podría resolver este problema? He usado JavaScript en el pasado para forzar los campos de formulario en una página para que coincida con la cadena de consulta, pero hay problemas con ese enfoque (es decir, FF y Safari normalmente no ejecutan el evento onload para la ventana al cargar una página desde el caché) y me parece un truco.

¿Alguna sugerencia?

Actualización: Sólo se me ha ocurrido que lo que podría estar sucediendo es la siguiente:

1. opción C se selecciona
2. la página se almacena en caché
3. el JavaScript carga el nuevo URL
4. pulsó el botón de volver
5. la opción C es restaurada porque es lo que se almacena en caché antes de la JavaScript/página de recarga.

Así que creo que esto no es un problema del navegador que no restaura el estado del menú de selección, es un problema de sincronización.

Answer 1

AFAIK la razón por la que no se está restaurando es que DOM no es el que estaba en el caché en el último momento de la carga del caché. El navegador restaura lo que el objeto en caché tenía en la página anterior. Tienes que mantener el estado por ti mismo.

Sugeriría poner una función en el cuerpo apropiado que siempre se ejecutará mientras se analiza el DOM (pero no tengo una configuración de entorno de muestra para probar este escenario, así que voy en mi "debería funcionar" detector)

<script type="javascript"> 
    function fix_selects(){ 
    //do something here to ensure that the select is setup how you want. 
    //Maybe using a window location hash? 
    } 
    fix_selects(); 
</script> 

Answer 2

Este código jQuery hizo el truco para mí

$(document).ready(function() { 
    $("select").each(function() { 
     $(this).val($(this).find('option[selected]').val()); 
    }); 
}) 

Answer 3

el fragmento de @frakhoffy trabajó para mí, pero se rompió el comportamiento de selección de la normalidad en Chrome. Al presionar la página sin una opción seleccionada, la selección estaba en blanco aunque no haya una opción en blanco en la selección.Terminé yendo con:

$(document).ready(function() { 
    $('select').each(function() { 
    var select = $(this); 
    var selectedValue = select.find('option[selected]').val(); 

    if (selectedValue) { 
     select.val(selectedValue); 
    } else { 
     select.prop('selectedIndex', 0); 
    } 
    }); 
});