Tengo un menú de selección que intento implementar en mi página para que un usuario seleccione un país.

Mis opciones actuales son Canadá, Estados Unidos y Global. Estoy intentando agregar el atributo selected en Canadá cuando se carga la página para que Canadá sea el país seleccionado de forma predeterminada. Esto funciona como se esperaba, pero noté que si seleccioné otro país, por ejemplo, "Estados Unidos", visité otra página en el sitio web y regresé a través de la flecha hacia atrás al país que seleccioné antes de redirigir en este caso, "Estados Unidos" sigue siendo el país seleccionado. y no Canadá.

Si inspecciono, veo que Canadá tiene el atributo seleccionado, pero Estados Unidos todavía se muestra como el seleccionado.

He intentado agregar

 document.getElementById("country-select").selectedIndex = -1;

Lo cual creo que debería eliminar el atributo seleccionado, pero esto no funciona.

¿Cómo puedo restablecer mi menú desplegable de selección y mostrar Canada de forma predeterminada incluso después de volver a la página?

No sé si podré volver a crear mi problema en un fragmento de código, pero

Aquí está mi fragmento de código:

 document.getElementById("country-select").selectedIndex = -1; let selectedCountry = document.getElementById(124); // set Canada as default selected country selectedCountry.setAttribute('selected', 'true')

 v <select name="country" id="country-select"> <option id="0" value="0">Global</option> <option id="1" value="1">United States</option> <option id="124" value="124">Canada</option> </select>