Popular inputs according to the value of the selected option

Navigation
2

I have 3 arrays, cities, capitals and population. How can I do when clicking on a certain state to appear in the inputs the respective values, ie capital and population of the state selected. 

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>
    
asked by anonymous 23.08.2018 / 05:51

2 answers

1

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

Since the index values of the options within the SELECT element match those of the parallel array index values, the selectedindex property of the SELECT element creates a convenient way to get directly to the corresponding data in other arrays

In the function create an index variable, 

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

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

23.08.2018 / 07:23
1

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

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>

    
23.08.2018 / 06:42
Synchronization in two ajax Remove files with File System