Select Open window with bank options

Question

I need some help, I have a code checkbox there was a window, if the window was gone, so far so good, only now, it’s not going to be another checkbox which will control the display of the window.

Will be a select and your options should come from the database(Postgre).

I have to take the 3 options that come from the bank and put to open and close this window.

This is my select:

<div class="es2 col-md-6">
   <label class="lb">
      Nacionalidade
   </label>
   <select ng-model="pessoa.pessoasFisicas.nacionalidade.idNacionalidade" ng-options="nac.idNacionalidade as nac.descricao for nac in nacionalidades " class=" js-example-theme-single1"  style="width: 100%; margin-top: -3px;" placeholder="Digite aqui nacionalidade">
      <option  ></option>
   </select>
</div>

These are the windows that have to open and close in case they are.

<li>
   <a data-toggle="tab"   id="tabEstrangeiro"  data-target="#estrangeiro">
       Estrangeiro
   </a>
</li>
<li>
   <a data-toggle="tab"  id="tabNaturalizado"  data-target="#naturalizado">
      Naturalizado
   </a>
</li>

Answer 1

The following code should help you, any questions or missing parts, just let me know:

function selectMudou() {
  var select = document.getElementById('opcoes');
  switch ( select.options[select.selectedIndex].text ) {
    case 'Opção 1': // caso seja a opção 1
      document.getElementById('tabEstrangeiro').style.display = 'none';
      document.getElementById('tabNaturalizado').style.display = 'initial';
      break;
    case 'Opção 2': // caso seja a opção 2
      document.getElementById('tabEstrangeiro').style.display = 'initial';
      document.getElementById('tabNaturalizado').style.display = 'none';
      break;
    case 'Opção 3': // caso seja a opção 3
      document.getElementById('tabEstrangeiro').style.display = 'none';
      document.getElementById('tabNaturalizado').style.display = 'none';
      break;
  }
}

#esconder {
  display: none;
}

<select id="opcoes" onchange="selectMudou()">
  <option id="esconder">Escolhe</option>
  <option>Opção 1</option>
  <option>Opção 2</option>
  <option>Opção 3</option>
</select>
<li>
  <a data-toggle="tab" id="tabEstrangeiro" data-target="#estrangeiro">Estrangeiro</a>
</li>
<li>
  <a data-toggle="tab" id="tabNaturalizado" data-target="#naturalizado">Naturalizado</a>
</li>

Edited (function to change options):

function mudarOpcoes(novasOpcoes) {
  var select = document.getElementById('opcoes');
  var opcoes = select.getElementsByTagName('option');
  for ( let i = 0; i < opcoes.length - 1; i++ ) {
    opcoes[i + 1].innerText = novasOpcoes[i];
  }
}

var novasOpcoes = ['Dados', 'da', 'BD'];

mudarOpcoes(novasOpcoes);

#esconder {
  display: none;
}

<select id="opcoes" onchange="selectMudou()">
  <option id="esconder">Escolhe</option>
  <option>Opção 1</option>
  <option>Opção 2</option>
  <option>Opção 3</option>
</select>

Answer 2

Yes great help, but I also want to have the options and have this option coming from the database, that comes dynamically understand, in case I want to know how to take this value and put in my li, to then make appear and disappear