Hide and Show DIV based on SELECT response

Question

Hide and Show DIV based on SELECT response

Navigation

#1 by (2 votes)

0

I have the following code and I would like that when selecting any value inside the select "#cities" show the ".DadosLoja" div and that it is hidden at first, already taking advantage of the question there is something else that I am not getting is to put the value "Select" in the select "#cities", either as value or with placeholder, none worked (ps: select information comes from another JS).

     <div class="row">
        <div class="col-lg-12 text-center">
            <span class="TituloLoja">Selecione sua localidade: </span>
            <select id="cities" class="empty" name="cities"></select>
        </div>
    </div>

   <div class="row content" >
         <div class="well text-left">
            <div class="dadosLoja ">
                <span class="TituloLoja">Informações da Loja:</span><br />
                <label>Telefone: <span id="telefone"></span></label>
            </div>
        </div>
    </div>

javascript html jquery

asked by anonymous 16.03.2016 / 13:02

1 answer

Passing a PHP variable to a Bootstrap modal Show menu when right-clicking?

score 2 · Accepted Answer

Explanation:

To make the div .dadosLoja hidden, I put it as display:none; . When an option is selected and this is different from "Select", javascript changes display from div .dadosLoja to display:block; . The "Select" option was included in the html with the selected property, so by default it is already selected.

Result:

function selected(value){
var dadosLoja = document.getElementsByClassName('dadosLoja');
	if(value != "Selecionar"){
    dadosLoja[0].style.display = 'block';
  }else{
  dadosLoja[0].style.display = 'none';
  }
}

     <div class="row">
        <div class="col-lg-12 text-center">
            <span class="TituloLoja">Selecione sua localidade: </span>
            <select onclick="selected(this.value)" id="cities" class="empty" name="cities">
              <option selected>Selecionar</option>
              <option>Teste 2</option>
              <option>Teste 3</option>
              <option>Teste 4</option>
            </select>
        </div>
    </div>

   <div class="row content" >
         <div class="well text-left">
            <div class="dadosLoja" style="display:none;">
                <span class="TituloLoja">Informações da Loja:</span><br />
                <label>Telefone: <span id="telefone"></span></label>
            </div>
        </div>
    </div>

You can view here code as well.