Script to show capital of selected state?

Navigation
1

Well, I wanted it when I selected a certain state, to display an alert informing the capital of it. Thanks in advance. 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Exercício</title>
</head>
<body>
  <select name="estado"> 
    <option value="estado">Selecione o Estado</option> 
    <option value="ac">Acre</option> 
    <option value="al">Alagoas</option> 
    <option value="am">Amazonas</option> 
    <option value="ap">Amapá</option> 
    <option value="ba">Bahia</option> 
    <option value="ce">Ceará</option> 
    <option value="df">Distrito Federal</option> 
    <option value="es">Espírito Santo</option> 
    <option value="go">Goiás</option> 
    <option value="ma">Maranhão</option> 
    <option value="mt">Mato Grosso</option> 
    <option value="ms">Mato Grosso do Sul</option> 
    <option value="mg">Minas Gerais</option> 
    <option value="pa">Pará</option> 
    <option value="pb">Paraíba</option> 
    <option value="pr">Paraná</option> 
    <option value="pe">Pernambuco</option> 
    <option value="pi">Piauí</option> 
    <option value="rj">Rio de Janeiro</option> 
    <option value="rn">Rio Grande do Norte</option> 
    <option value="ro">Rondônia</option> 
    <option value="rs">Rio Grande do Sul</option> 
    <option value="rr">Roraima</option> 
    <option value="sc">Santa Catarina</option> 
    <option value="se">Sergipe</option> 
    <option value="sp">São Paulo</option> 
    <option value="to">Tocantins</option> 
</select>
  <script>
    //É aqui a parte que não sei muito bem o que fazer
  </script>
</body>
</html>
    
asked by anonymous 12.04.2017 / 01:55

1 answer

1

Based on your code, one way is to store the capitals of each state in a custom attribute on option elements. In this case, I called data-capital . With JavaScript, I searched for the select element of the DOM through the getElementById function and assigns a function to the change event of this element. This function does nothing more than select the selected option element and display the alert with the value of the data-capital attribute. 

var estado = document.getElementById("estado");

estado.addEventListener("change", function () {
  var option = estado.options[estado.selectedIndex];
  alert(option.getAttribute("data-capital"));
});
<select name="estado" id="estado"> 
    <option value="estado">Selecione o Estado</option> 
    <option value="ac" data-capital="Rio Branco">Acre</option> 
    <option value="al" data-capital="Maceió">Alagoas</option> 
    <option value="ap" data-capital="Macapá">Amapá</option> 
    <option value="am" data-capital="Manaus">Amazonas</option> 
    <option value="ba" data-capital="Salvador">Bahia</option> 
    <option value="ce" data-capital="Fortaleza">Ceará</option> 
    <option value="df" data-capital="Brasília">Distrito Federal</option> 
    <option value="es" data-capital="Vitória">Espírito Santo</option> 
    <option value="go" data-capital="Goiânia">Goiás</option> 
    <option value="ma" data-capital="São Luís">Maranhão</option> 
    <option value="mt" data-capital="Cuiabá">Mato Grosso</option> 
    <option value="ms" data-capital="Campo Grande">Mato Grosso do Sul</option> 
    <option value="mg" data-capital="Belo Horizonte">Minas Gerais</option> 
    <option value="pa" data-capital="Belém">Pará</option> 
    <option value="pb" data-capital="João Pessoa">Paraíba</option> 
    <option value="pr" data-capital="Curitiba">Paraná</option> 
    <option value="pe" data-capital="Recife">Pernambuco</option> 
    <option value="pi" data-capital="Teresina">Piauí</option> 
    <option value="rj" data-capital="Rio de Janeiro">Rio de Janeiro</option> 
    <option value="rn" data-capital="Natal">Rio Grande do Norte</option>  
    <option value="rs" data-capital="Porto Alegre">Rio Grande do Sul</option>
    <option value="ro" data-capital="Porto Velho">Rondônia</option>
    <option value="rr" data-capital="Boa Vista">Roraima</option> 
    <option value="sc" data-capital="Florianópolis">Santa Catarina</option> 
    <option value="sp" data-capital="São Paulo">São Paulo</option> 
    <option value="se" data-capital="Aracaju">Sergipe</option> 
    <option value="to" data-capital="Palmas">Tocantins</option> 
</select>
  

Note : You can retrieve the value of an attribute of type data-* through element.dataset.* , * being the name given to the attribute. In this case, alert(options.dataset.capital) would also work.

    
12.04.2017 / 03:17
Close Form Dynamically jQuery Error when calling the report