refresh na página

[Biel. 9]

Olá pessoal. O código abaixo imprime o valor selecionado, mas ao atualizar a página o valor selecionado sai. Como impedir  de sair o valor selecionado mesmo atualizando a página?

<select name="" size="4" id="select1" class="select1"  onchange="func1()">
    <option value=""></option>
    <option value="item1">item1</option>
    <option value="item2">item2</option>
    <option value="item3">item3</option>
</select>

<div id="id1" class="id1"> 1</div>
<div id="id2" class="id2"> 2</div>
<div id="id3" class="id3"> 3</div>

<script>

  function func1(){
  const valorSelecionado = document.getElementById('select1').value;

  if(valorSelecionado=='item1'){
   document.getElementById('id1').innerHTML='APRENDIZ';
   document.getElementById('id2').innerHTML='APRENDIZ';
  }

  else if(valorSelecionado=='item2'){
   document.getElementById('id1').innerHTML='ALUNO';
   document.getElementById('id2').innerHTML='ALUNO';
  }

  else if(valorSelecionado=='item3'){
   document.getElementById('id1').innerHTML='TETE';
   document.getElementById('id2').innerHTML='TETE';
  }
  
}
</script>

 

[Omar~ 87]

Há diversas formas de como proceder, mas cada uma depende do contexto final.

O jeito mais simples e robusto pode se feito similar a isso:

<select name="" id="select1">
    <option value=""></option>
    <option value="item1">item1</option>
    <option value="item2">item2</option>
    <option value="item3">item3</option>
</select>

<div id="id1" class="id1"> 1</div>
<div id="id2" class="id2"> 2</div>

<script>
    var select1 = document.getElementById('select1'),
        id1 = document.getElementById('id1'),
        id2 = document.getElementById('id2'),
        valorSelecionado = select1.value;

    mostraHTML();

    select1.addEventListener('change', trocar, false);

    function trocar(evento) {
        valorSelecionado = evento.target.value;
        mostraHTML();
    }

    function mostraHTML() {
        switch (valorSelecionado) {
            case 'item1':
                id1.innerHTML = 'APRENDIZ';
                id2.innerHTML = 'APRENDIZ';
                break;
            case 'item2':
                id1.innerHTML = 'ALUNO';
                id2.innerHTML = 'ALUNO';
                break;
            default:
                id1.innerHTML = 'TETE';
                id2.innerHTML = 'TETE';
                break;
        }
    }
</script>

 

[Biel. 9]

  Em 23/09/2022 at 17:58, Omar~ disse:

Há diversas formas de como proceder, mas cada uma depende do contexto final.

O jeito mais simples e robusto pode se feito similar a isso:

<select name="" id="select1">
    <option value=""></option>
    <option value="item1">item1</option>
    <option value="item2">item2</option>
    <option value="item3">item3</option>
</select>

<div id="id1" class="id1"> 1</div>
<div id="id2" class="id2"> 2</div>

<script>
    var select1 = document.getElementById('select1'),
        id1 = document.getElementById('id1'),
        id2 = document.getElementById('id2'),
        valorSelecionado = select1.value;

    mostraHTML();

    select1.addEventListener('change', trocar, false);

    function trocar(evento) {
        valorSelecionado = evento.target.value;
        mostraHTML();
    }

    function mostraHTML() {
        switch (valorSelecionado) {
            case 'item1':
                id1.innerHTML = 'APRENDIZ';
                id2.innerHTML = 'APRENDIZ';
                break;
            case 'item2':
                id1.innerHTML = 'ALUNO';
                id2.innerHTML = 'ALUNO';
                break;
            default:
                id1.innerHTML = 'TETE';
                id2.innerHTML = 'TETE';
                break;
        }
    }
</script>

 

Não funcionou, mas já avançou bastante. Ao selecionar item1 ou item2 e dar refresh na página o valor sai não segura.