Tengo un formulario que filtra a través de diferentes autos y funciona perfectamente.
Cuando un usuario selecciona una "Fabricación", los "Modelos" hermanos correctos se completan en el siguiente menú desplegable, y así sucesivamente.
El problema es que una vez que un usuario ha realizado una búsqueda, si hace clic en el botón Atrás del navegador, los valores seleccionados que se completan dinámicamente vuelven a los valores predeterminados.
No estoy usando ajax para completar dinámicamente los campos de selección, sino solo javascript donde estoy leyendo un archivo JSON y actualizando los modelos/series/etc.
He mirado esta publicación: Conservar HTML modificado dinámicamente en el botón Atrás
Y no entiendo cómo funciona esto, también he oído hablar del almacenamiento local: ¿cuál sería la mejor vía para viajar? Gracias.
Usar localStorage para esto puede ser un poco difícil de manejar (¿cuándo y cómo debo borrar este valor?) y hay consideraciones relacionadas con la seguridad que pueden hacer que sea una solución inviable.
Otra opción es utilizar un cuadro de texto oculto que utilice el comportamiento predeterminado del navegador.
Cuando se carga una página después de hacer clic en el botón Atrás, los navegadores parecen llenar cuadros de texto según el valor que contenía cuando el usuario abandonó la página (incluso si ese valor se cambió dinámicamente). Tenga en cuenta que esto es diferente a cómo se manejan las entradas ocultas, donde se ignoran los cambios dinámicos, por lo que debe usar un cuadro de texto.
<select></select> <input type="text" style="display:none" /> <script> // store the dropdown's value in a hidden textbox which is persisted and // used to populate the dropdown when the back button is used to get here $('select').on('change', function() { $('input').val($(this).val()); }); // example showing dynamic population of dropdown $.ajax({ url: 'api/get-dropdown-options', success: function(data) { // dynamically populate the dropdown $('select').html(data); // update the dropdown's value based on the persistent value // retained in the hidden textbox $('select').val($('input').val()); } }); </script>Debido a que los datos se cargan dinámicamente, el navegador no podrá volver a llenar las entradas seleccionadas previamente cuando el usuario regrese a la página anterior.
Le sugiero que utilice el almacenamiento local del navegador para almacenar las últimas selecciones y recuperarlas cuando el usuario regrese. Para lograrlo, es tan simple como establecer una nueva variable en el objeto localStorage y luego recuperarla así:
localStorage.make = "BMW";
alert(localStorage.make);
También aquí hay un ejemplo más útil:
select = document.getElementById("make"); if (localStorage.make) { select.options[localStorage.make].selected = true; }