Display different images as selected in select

Asked

Viewed 357 times

0

Hello, I would like to change image and information as the selection in select each option, as in the example.

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

php javascript html css bootstrap

  • And this image and information comes from where? A request to the server?

  • locally hosted files, where I only call src="image.png"

2 answers

0

There is a way through jQuery where you can show or hide content based on your selection. All you should keep in mind is that you should keep the same value in select for each id of the content you want to appear:

$(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>

  • in what I want to do I need to add more than one representative per state, the example of Div1 , repeats the representative.

0


Javascript-enabled, for example put 4 states. 

 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>

You can put as many states and representatives as you want by inserting in the script sequentially snippets such as 

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

and Ivs such as

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

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

Browser other questions tagged php javascript html css bootstrap

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