Tengo 2 páginas html, index.html y dropdown-component.html

dropdown-component.html :

 <select id="AssistSelectMenu"> <option value="assist/AK.html">Alaska</option> <option value="assist/AL.html">Alabama</option> <option value="assist/AZ.html">Arizona</option> </select>

onclick en un botón en index.html , trato de obtener el contenido de dropdown-component.html

Usando el ff:

 function fetchJXSelectMenu() { fetch('dropdown-component.html') .then(response => response.text()) .then(text => document.querySelector('#component-assist-jx-select-menu').innerHTML = text); }

Se carga en un div <div id="component-assist-jx-select-menu"></div> .

El problema es que el "componente" que carga es una select/option que utiliza localStorage para recordar la última opción seleccionada por el usuario.

Se parece a esto:

 $(function () { $('#AssistSelectMenu').change(function () { localStorage.setItem('JXselect', this.value); }); if (localStorage.getItem('JXselect')) { $('#AssistSelectMenu').val(localStorage.getItem('JXselect')); } });

Si no estoy usando el método fetch() , la función localStorage funciona bien, pero si la uso, no carga la última opción seleccionada por el usuario al cargar la página. Supongo que esto se debe a que el navegador ya terminó de mostrar la página y no puede procesar el localStorage para el componente recién cargado.

Así que mi pregunta es ¿cómo soluciono esto? Intenté poner el script en el componente pero eso no lo resolvió en absoluto.

¡Gracias de antemano por cualquier ayuda!