Show different images as selected in select

Question

Show different images as selected in select

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

Hello, I would like to change image and information according to 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

asked by anonymous 12.06.2017 / 19:32

2 answers

0

There is a way through jQuery where you can show or hide content based on your selection. All you have to keep in mind is that you should keep the same value in the select for every 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><divid="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><pid="option2" class="group"><img src="https://vnext.com.br/wp-content/uploads/2013/05/bill-gates.jpg"/></p><pid="option3" class="group"><img src="http://www.revistaplaneta.com.br/wp-content/uploads/sites/3/2016/02/17-pl517-pessoa-324x235.jpg"/></p><pid="option4" class="group"><img src="http://www.fatosdesconhecidos.com.br/wp-content/uploads/2016/05/her-fp-0787-3.jpg"/></p><imgsrc="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>

13.06.2017 / 17:56

Error: "mysql_num_rows () expects parameter 1 to be resource, null given in Query was empty" Row Results in Columns (SOMA)

score 0 · Accepted Answer

With javascript , for example I 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 reps as you want by inserting in the script snippets sequentially such as

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

and divs 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>ChooseColor</option><optionvalue="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>