Show a select when clicking on a particular option

Question

Show a select when clicking on a particular option

Navigation

#1 by (0 votes)

0

I am inexperienced in javascript, and would like help in this case:

I have two selects in my document:

<select id="estado">
<option value="MG">MG</option>
<option value="SP">SP</option>
<option value="RJ">RJ</option>
<option value="RJ">BA</option>
</select>
<select id="cidade">
<option value="Belo Horizonte">Belo Horizonte</option>
<option value="Betim">Betim</option>
<option value="Contagem">Contagem</option>
</select>

The expected behavior is that when you click on a state option, it overrides the id = city selection. I believe that document.write is the solution, however, the content to be overridden should be taken into account the order of the option clicked on the select id = state and not its value.

For example:

The first option overrides the select city for:

<select id="cidade">
<option value="Sou o primeiro">Sou o primeiro</option>
</select>

The second option replaces the select city for:

<select id="cidade">
<option value="Sou o segundo">Sou o segundo</option>
</select>

The third one replaces the select city for:

<select id="cidade">
<option value="Sou o terceiro">Sou o terceiro</option>
</select>

The fourth replaces the select city for:

<select id="cidade">
<option value="Sou o quarto">Sou o quarto</option>
</select>

The biggest problem is that these values to be overridden must be referenced by the order in the select state, not by its value. That is, regardless of the value of the third option of the select #estate, it does not matter if it will be SP, RJ, MG or BA, when it is clicked, it will replace the other select with the third code above. If you click on the second option, it replaces the second code.

Well that's it. Thank you all for helping.

javascript

asked by anonymous 02.03.2015 / 20:24

1 answer

Autocomplete in a cell of a table How to add a new property to the GMSMarker class?

score 0 · Accepted Answer

As clarified by the Question Author, the important thing here is to get the index of the selected option.

Here's a new example:

//pre-consulta para obter os selects #master e #details
var master = document.getElementById("master");
var details = document.getElementById("details");

master.onchange = function () {
  //necessario para poder utilizar o método indexOf nos options de #master
  var options = master.querySelectorAll("option");
  options = Array.prototype.slice.call(options);
  
  //recuperando o option selecionado
  selected = Array.prototype.filter.call(options, function(option) {
      return option.selected;
  });    
  
  //recuperando o indice do option selecionado, caso não exista uma option selecionado, atribuir 0.
  var indice = 0;
  if (selected != null && selected.length == 1) 
      indice = options.indexOf(selected[0]);
  
  //caso nenhum option seja selecionado ou se o option default for selecionado, desativar #details.
  details.disabled = indice == 0;
  details.readOnly = indice == 0;    
  
  //atualizando os valores de #details.
  details.innerHTML = '';
  if (indice != 0) {
    var option = document.createElement("option");
    option.innerHTML = "Indice Selecionado: " + indice;        
    details.appendChild(option);
  }
};

<div>
  <label for="master" >Master: </label>
  <select id="master" >
    <option>Selecione um Valor</option>
    <option>Primeiro</option>
    <option>Segundo</option>
    <option>Terceiro</option>
    <option>Quarto</option>
  </select>
</div>
<div>
  <label for="details" >Details: </label>
  <select id="details" >
  </select>
</div>