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>