Using SELECT to list information

Question

I need a little help for a situation. I need to list information within the states. EX: If I click on Acre, I need to click on a box with some information about it. But I don’t know how to make this information appear. I don’t want to use php or java, because it will be little information.

Can I only do this with html? Is there a website that explains? I did a search and I couldn’t find it.. If someone helps me, I appreciate it.! :)

    <label class="estados">Selecione o estadopara exibir as informações que deseja.</label>
<select class="Test" name="tEst" id="estados">
<option value="Selecione"> SELECIONE</option>
<option value="ac"> Acre</option>
<option value="al"> Alagoas</option>
<option value="ap"> Amapá</option>                               
</select>

(And then all the states go on.)

Answer 1

From what I understand of your question, you want to use only the side of client, then if you can use Javascript, as an alternative, I advise you to use Angularjs that would simply solve your problem. Your code would look like this:

(function() {
  'use strict';

  angular
    .module('appEstados', []);

  angular
    .module('appEstados')
    .controller('EstadoController', EstadoController);

  EstadoController.$inject = [];

  function EstadoController() {
    var estado = this;
    estado.opcoes = [];

    iniciar();

    function iniciar() {
      estado.opcoes = [];
      estado.opcoes.push({nome: "Acre", informacoes: "O Acre é um estado que começa com A"});
      estado.opcoes.push({nome: "Alagoas", informacoes: "O Alagoas é um estado também que começa com A"});

      estado.seleciona = estado.opcoes[0];
    }
  }
})();

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="appEstados">
  <div ng-controller="EstadoController as estado">
    <label class="estados">Selecione o estado para exibir as informações que deseja.</label>
    <select ng-options="opcao.nome for opcao in estado.opcoes" ng-model="estado.selecionado"></select>

    <br>
    <br>

    {{estado.selecionado.informacoes}}
  </div>
</div>