Show a <select> by clicking on a particular <option>

Asked

Viewed 796 times

0

I am inexperienced in javascript, and would like a 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 by clicking on an option of the state, it replaces the select of id=city. I believe that Document.write is the solution, however, the content to be replaced should be taken into account the order of the option clicked in select id=status and not its value.

For example:

The first option replaces 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 replaces the select city to:

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

The room replaces the select city for:

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

The bigger problem is that these values to be replaced should be referenced by the order in the select state, not its value. That is, no matter the value of the third option of the select #state, no 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, replace it with the second code.

Well that’s it. I thank everyone who helps.

javascript

  • You want to replace the select#cidade in whole or only its "Content", the <option>? I’m not sure I understand your question

  • Are you using any lib, like jQuery for example?

  • You want when selecting a state, in the select of cities to be loaded a list of the respective ones to that state?

  • @I’m not using libraries. The idea is that by clicking on the first option of the #state, replace the #city list with the List referring to the first option. That is, no matter the values, the substitution is fixed by the order of the first, second, weaver option. It can only be the content of the options, or the easiest.

  • Boni, in this type of situation, I advise you to load the second select with AJAX. If you have any questions about how to do it, just tell me what technology you’re using in Server-Side, PHP, Ruby, C#, etc. If it’s just an academic activity, you can keep lists of cities, and just reload content.

  • @Tobymosque It is a very simple activity, do not need AJAX no. It is not necessary to take into account the cities. As I said, the codes of the first, second, weaver option are fixed, the code of the first option must appear independent of the value you have. And so goes the second, third, etc.

  • The question is... what is the need for it? Explain to us, who knows we can not understand better and help you

Show 2 more comments

1 answer

0


As clarified by the author of the question, the important thing here is to obtain the Dice of the selected option.

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

  • Thanks, but that’s not what I wanted. I don’t know if I expressed it right, but forget the cities. The question is as follows: no matter the value of the option that is chosen, if it is the first option, it shows in the other select a predefined options list, regardless of whether it is MG or CE. If it is the second option, then it will show another select with another list. What differentiates the generated options lists is not value, but the order that the options of the first select are.

  • Updated response.

  • That’s right. Thank you.

Browser other questions tagged javascript

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