Using SELECT to list information

Question

Using SELECT to list information

Navigation

#1 by (3 votes)

3

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 do not know how to get this information to appear. I do not want to use php or java because there will be little information.

Only with html can you do this? Do you have a website that explains? I searched and did not find it .. If someone helps me, I thank you! :)

    <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 continue all states.)

html

asked by anonymous 18.11.2016 / 18:40

1 answer

How to transform density scatter plot? JRE 8, TDM-GCC MinGW: Silent installation

score 3 · Accepted Answer

From what I understand of your question, you use only the client side, so if you can use Javascript as an alternative medium, I advise you to use AngularJS that would solve your problem in a simple way. 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><divng-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>