Script to show capital of selected state?

Asked

Viewed 124 times

1

Well, I wanted that when selected a certain state, show an Alert informing the capital of it. Already, I thank.

<!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>

javascript html script

  • Starts by doing the select, is a very common HTML element, you should be able to do it without problems. Then, come back here, edit your question and enter the code you made.

1 answer

1


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

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: it is possible to recover 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.

Browser other questions tagged javascript html script

You are not signed in. Login or sign up in order to post.