Popular inputs according to the selected option value

Asked

Viewed 83 times

1

I have three arrays, cities, capitals and population. How can I click on a given state to show in the inputs the respective values, i.e., capital and population of the selected state.

var cidades = new Array("Acre", "Bahia", "Minas Gerais", "Pernambuco", "Rio de Janeiro", "São Paulo") 
var capital = new Array("Rio Branco", "Salvador", "Belo Horizonte", "Recife", "Rio de Janeiro", "São Paulo") 
var populacao = new Array("829.619", "15.344.447", "21.119.536", "9.473.266", "16.718.956", "45.094.866" ) 

function getData() { 
   var estado = document.getElementById("estados");
   document.getElementById("capital").value = ?????
   document.getElementById("populacao").value = ????
} 

getData();
Selecione o estado: 
<select id="estados" onChange="getData(this.form)"> 
   <option>Acre</option>
   <option>Bahia</option>
   <option>Minas Gerais</option>
   <option>Pernambuco</option>
   <option>Rio de Janeiro</option>
   <option>São Paulo</option>
</select> 
<br>
A capital é: 
<input type="text" id="capital" size=13> 
<br> 
A população é: 
<input type="text" id="populacao" size=6>

javascript array

2 answers

1

In function getData() a parameter is passed, the index value of each <option>, then it takes the parameter for JS and uses as an array index:

var cidades = new Array("Acre", "Bahia", "Minas Gerais", "Pernambuco", "Rio de Janeiro", "São Paulo");
var capital = new Array("Rio Branco", "Salvador", "Belo Horizonte", "Recife", "Rio de Janeiro", "São Paulo");
var populacao = new Array("829.619", "15.344.447", "21.119.536", "9.473.266", "16.718.956", "45.094.866" );
function getData(valor){
   document.getElementById("capital").value = capital[valor];
   document.getElementById("populacao").value = populacao[valor];
}
<!DOCTYPE html>
<html>
<head>
   <title>teste</title>
</head>
<body>
   Selecione o estado:
   <select id="estados" onChange="getData(this.value)"> 
      <option disabled="disabled" selected="selected">Selecione o Estado</option>
      <option value="0">Acre</option>
      <option value="1">Bahia</option>
      <option value="2">Minas Gerais</option>
      <option value="3">Pernambuco</option>
      <option value="4">Rio de Janeiro</option>
      <option value="5">São Paulo</option>
   </select> 
   <br>
   A capital é: 
   <input type="text" id="capital" disabled="disabled" size=13> 
   <br> 
   A população é: 
   <input type="text" id="populacao" disabled="disabled" size=6>
</body>
</html>

Note: Put one more option on <option> so that Acre could be selected as well (as is disabled is of no value).

1


These are parallel arrays. They are said to be parallel if their elements identified by the same Dice are related.

Since the input values of the options within the SELECT element combine with those of the parallel array input values, the selectedindex property of the SELECT element creates a convenient way to directly reach the corresponding data in other arrays

In the function create a variable index,

Var index = document.getElementById("estados").selectedindex

Use this index variable to return the respective items of the other arrays, replace the question marks with capital[index] and population[index]

Browser other questions tagged javascript array

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