0

Olá, gostaria de mudar imagem e informações conforme a seleção no select cada option, como no exemplo.

<html>
<body>
<div id="our-team">
		<div class="container">
			<div class="text-center">
				<h3>Representantes</h3>
				<p>Selecione o representante mais próximo de sua cidade.</p>

				<select class="form-control select" name="estado">
				    <option value="">Selecione o Estado (UF)</option>
				    <option value="AL">Alagoas</option>
				    <option value="AM">Amazonas</option>
				    <option value="CE">Ceará</option>
				    <option value="MA">Maranhão</option>
				    <option value="PA">Pará</option>
				    <option value="PB">Paraíba</option>
				    <option value="PE">Pernambuco</option>
				    <option value="PI">Piauí</option>
				    <option value="RN">Rio Grande do Norte</option>
				    <option value="SE">Sergipe</option>
				    <option value="TO">Tocantins</option>
				</select>
			</div>
	<div class="row">
				<div class="col-md-4 wow fadeInUp" data-wow-offset="0" data-wow-delay="0.3s">
					<div class="text-center">
          <p>(imagem do representante)</p>
						<img src="img/team/1.png" alt="">
						<h2>Tolentino Moura</h2>
						<h4>T Moura Representações LTDA ME</h4>
						<p>
(82) 99982-9194 <br> (82) 3373-5553 <br>
[email protected]</p>
					</div>
				</div>
				<div class="col-md-4 wow bounceInDown" data-wow-offset="0" data-wow-delay="0.3s">
					<div class="text-center">
          <p>(imagem do representante)</p>
						<img src="img/team/2.png" alt="">
						<h2>Milene Muniz</h2>
						<h4>Telemarketing</h4>
						<p>(88) 9 9688-8317<br>
[email protected]</p>
					</div>
				</div>
			</div>
		</div> 
	</div>
  </body>
  </html>

2
  • E essa imagem e informação vem da onde? Uma requisição ao servidor? 12/06/2017 às 18:06
  • hospedado localmente os arquivos, onde só chamo o src="imagem.png"
    – Mateus
    13/06/2017 às 14:28

2 Respostas 2

0

Com javascript, para exemplo coloquei 4 estados.

 function show(aval) {
    if (aval == "AL") {
    hiddenDiv1.style.display='inline-block';
    } 
    else{
    hiddenDiv1.style.display='none';
    }
    
    if (aval == "AM") {
    hiddenDiv2.style.display='inline-block';
    } 
    else{
    hiddenDiv2.style.display='none';
    }
    
    if (aval == "CE") {
    hiddenDiv3.style.display='inline-block';
    } 
    else{
    hiddenDiv3.style.display='none';
    }
    
    if (aval == "MA") {
    hiddenDiv4.style.display='inline-block';
    } 
    else{
    hiddenDiv4.style.display='none';
    }
}
<div id="our-team">
	<div class="container">
			<div class="text-center">
				<h3>Representantes</h3>
				<p>Selecione o representante mais próximo de sua cidade.</p>
				<select class="form-control select" name="estado" onchange="java_script_:show(this.options[this.selectedIndex].value)">
				    <option value="">Selecione o Estado (UF)</option>
				    <option value="AL">Alagoas</option>
				    <option value="AM">Amazonas</option>
				    <option value="CE">Ceará</option>
				    <option value="MA">Maranhão</option>
				</select>
			</div>
			
			<div class="row">
	
				<div id="hiddenDiv1" style="display:none" class="col-md-4 wow fadeInUp" data-wow-offset="0" data-wow-delay="0.3s">
					<div class="text-center">
          				<p>(imagem do representante)</p>
						<img src="https://www.linkativo.blog.br/wp-content/uploads/2013/08/10-famosos-que-sao-bipolares.jpg" alt="">
						<h2>Tolentino Moura</h2>
						<h4>T Moura Representações LTDA ME</h4>
						<p>
						(82) 99982-9194 <br> (82) 3373-5553 <br>
						[email protected]</p>
					</div>
				</div>
				
				<div id="hiddenDiv2" style="display:none" class="col-md-4 wow bounceInDown" data-wow-offset="0" data-wow-delay="0.3s">
					<div class="text-center">
          				<p>(imagem do representante)</p>
						<img src="http://1.bp.blogspot.com/-EDEORKr8uEE/T2iKuca8nRI/AAAAAAAACdk/UxdI0p5fnzU/s200/3-angelina-jolie-lo-mas-famosos.jpg" alt="">
						<h2>Milene Muniz</h2>
						<h4>Telemarketing</h4>
						<p>(88) 9 9688-8317<br>
[email protected]</p>
					</div>
				</div>
				
				<div id="hiddenDiv3" style="display:none" class="col-md-4 wow bounceInDown" data-wow-offset="0" data-wow-delay="0.3s">
					<div class="text-center">
          				<p>(imagem do representante)</p>
						<img src="http://pm1.narvii.com/6389/4a230fb1df6d264290f6febb183d70dfb107f32c_hq.jpg" alt="">
						<h2>Fulano de Tal</h2>
						<h4>Telemarketing</h4>
						<p>(00) 9 9600-0000<br>
[email protected]</p>
					</div>
				</div>
				
				<div id="hiddenDiv4" style="display:none" class="col-md-4 wow bounceInDown" data-wow-offset="0" data-wow-delay="0.3s">
					<div class="text-center">
          				<p>(imagem do representante)</p>
						<img src="https://s-media-cache-ak0.pinimg.com/236x/dd/86/2a/dd862a7a570c2577d9997a83ed5c3fdd.jpg" alt="">
						<h2>Ciclano de Tal</h2>
						<h4>Telemarketing</h4>
						<p>(11) 9 9611-1111<br>
[email protected]</p>
					</div>
				</div>
				
			</div>
	</div> 
</div>

Você poderá colocar quantos estados e representantes que quiser, inserindo no script trechos sequencialmente tal como

if (aval == "SIGLA_ESTADO") {
hiddenDivPROXIMO_NUMERO.style.display='inline-block';
} 
else{
hiddenDivPROXIMO_NUMERO.style.display='none';
}

e divs tal como

<div id="hiddenDivPROXIMONUMERO" style="display:none" ......

Com jquery

$(document).ready(function(){
    $("select").change(function(){
        $(this).find("option:selected").each(function(){
            var optionValue = $(this).attr("value");
            if(optionValue){
                $(".box").not("." + optionValue).hide();
                $("." + optionValue).show();
            } else{
                $(".box").hide();
            }
        });
    }).change();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <div>
        <select>
            <option>Choose Color</option>
            <option value="AL">AL</option>
            <option value="AM">AM</option>
            <option value="CE">CE</option>
            <option value="MA">MA</option>
        </select>
    </div>
    
    

       
    <div class="AL box" data-wow-offset="0" data-wow-delay="0.3s">
		<div class="text-center">
          	<p>(imagem do representante)</p>
			<img src="https://www.linkativo.blog.br/wp-content/uploads/2013/08/10-famosos-que-sao-bipolares.jpg" alt="">
			<h2>Tolentino Moura</h2>
			<h4>T Moura Representações LTDA ME</h4>
			<p>
			(82) 99982-9194 <br> (82) 3373-5553 <br>
			[email protected]</p>
		</div>
	</div>
	
	    <div class="AM box" data-wow-offset="0" data-wow-delay="0.3s">
		<div class="text-center">
          	<p>(imagem do representante)</p>
			<img src="http://1.bp.blogspot.com/-EDEORKr8uEE/T2iKuca8nRI/AAAAAAAACdk/UxdI0p5fnzU/s200/3-angelina-jolie-lo-mas-famosos.jpg" alt="">
			<h2>Milene Muniz</h2>
			<h4>Telemarketing</h4>
			<p>(88) 99688-8317<br>
			[email protected]</p>
		</div>
	</div>
	
	    <div class="CE box" data-wow-offset="0" data-wow-delay="0.3s">
		<div class="text-center">
          	<p>(imagem do representante)</p>
			<img src="http://pm1.narvii.com/6389/4a230fb1df6d264290f6febb183d70dfb107f32c_hq.jpg" alt="">
			<h2>Fulano de Tal</h2>
			<h4>Telemarketing</h4>
			<p>(88) 99000-0000<br>
			[email protected]</p>
		</div>
	</div>
	
	    <div class="MA box" data-wow-offset="0" data-wow-delay="0.3s">
		<div class="text-center">
          	<p>(imagem do representante)</p>
			<img src="https://s-media-cache-ak0.pinimg.com/236x/dd/86/2a/dd862a7a570c2577d9997a83ed5c3fdd.jpg" alt="">
			<h2>Ciclano de Tal</h2>
			<h4>Telemarketing</h4>
			<p>
			(82) 91111-1111 <br>
			[email protected]</p>
		</div>
	</div>

0

Existe uma forma através de jQuery onde você pode mostrar ou esconder conteúdo baseado na sua seleção. Tudo o que você deve ter em mente é que você deve manter os mesmo value no select para cada id do conteúdo que você quer que apareça:

$(document).ready(function() {
  $('.group').hide();
  $('#option1').show();
  $('#selectMe').change(function() {
    $('.group').hide();
    $('#' + $(this).val()).show();
  })
});
.group {
  overflow: hidden;
  width: 200px;
  height: 150px;
}
.group img {
  max-width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div id="our-team">
    <div class="container">
      <div class="text-center">
        <h3>Representantes</h3>
        <p>Selecione o representante mais próximo de sua cidade.</p>

        <select id="selectMe">
  <option value="option1">Opção 1</option>
  <option value="option2">Opção 2</option>
  <option value="option3">Opção 3</option>
  <option value="option4">Opção 4</option>
</select>
      </div>
      <div class="row">
        <div class="col-md-4 wow fadeInUp" data-wow-offset="0" data-wow-delay="0.3s">
          <div class="text-center">
            <p id="option1" class="group"><img src="http://www.ultracurioso.com.br/wp-content/uploads/2016/06/10-6-600x338.jpg" /></p>
            <p id="option2" class="group"><img src="https://vnext.com.br/wp-content/uploads/2013/05/bill-gates.jpg" /></p>
            <p id="option3" class="group"><img src="http://www.revistaplaneta.com.br/wp-content/uploads/sites/3/2016/02/17-pl517-pessoa-324x235.jpg" /></p>
            <p id="option4" class="group"><img src="http://www.fatosdesconhecidos.com.br/wp-content/uploads/2016/05/her-fp-0787-3.jpg" /></p>
            <img src="img/team/1.png" alt="">
            <h2>Tolentino Moura</h2>
            <h4>T Moura Representações LTDA ME</h4>
            <p>
              (82) 99982-9194 <br> (82) 3373-5553 <br> [email protected]
            </p>
          </div>
        </div>
        <div class="col-md-4 wow bounceInDown" data-wow-offset="0" data-wow-delay="0.3s">
          <div class="text-center">
            <p>(imagem do representante)</p>
            <img src="img/team/2.png" alt="">
            <h2>Milene Muniz</h2>
            <h4>Telemarketing</h4>
            <p>(88) 9 9688-8317<br> [email protected]
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

1
  • no que quero fazer preciso adicionar mais de um representante por estado, o exemplo da Div1 , repete o representante.
    – Mateus
    16/06/2017 às 11:25

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .