Acabo de resolver una parte de mi rompecabezas al hacer que aparezcan Divs en una página basada en una selección y luego hacer que esa selección desaparezca para evitar que las personas vuelvan a seleccionar.

¿Cómo almaceno ahora esa selección en una sesión para que cuando naveguen a otra página en el sitio y luego regresen, siga siendo el mismo? ¿También puedo usar la sesión para mostrar divs en otras páginas según la selección original?

Agradezco que con el almacenamiento de la sesión esto se borre cuando se cierre el navegador, está bien.

Aquí hay un violín de dónde estoy hasta ahora https://jsfiddle.net/k33npx/s8k7tfgr/2/

 <h4>Your Tariff</h4> <div> Value Selected: <span id="current"></span> <br> <br> <select class="select" id="select"> <option>Choose Your Option</option> <option name="Tarrif 1" value="t1"> 1</option> <option name="Tarrif 2" value="t2"> 2</option> <option name="Tarrif 3" value="t3"> 3</option> <option name="Tarrif 4" value="t4"> 4</option> </select> <div class="t1"><p>Tariff 1</p></div> <div class="t2"><p>Tariff 2</p></div> <div class="t3"><p>Tariff 3</p></div> <div class="t4"><p>Tariff 4</p></div> </div>

 .t1 {display: none} .t2 {display: none} .t3 {display: none} .t4 {display: none} .select {display:block}

 function showSelectedItem() { var item = document.getElementById("select").value; document.getElementById("current").innerHTML = item; const classes = ['t1', 't2', 't3', 't4', 'select']; // hide all first; classes.forEach((classNode) => { document.querySelector(`.${classNode}`).style.display = classNode === item ? 'block': 'none'; }); } document.getElementById("select").addEventListener("change", showSelectedItem);

Gracias