show/hide div based on select option with getelementsbyclassname

Question

Im trying to get the divs to switch style properties when selected form select menu. Any help would be great!

there is the code:

the select tag(where i have the value to the script function):

 <div style="float: right; margin-right: 5%; width: auto;">
        <select style="border: 3px intset; border-radius: 5px; border-color: #17FFFF;" onchange="showstuff(this.value);">
            <optgroup label="Lisboa">
                <option value="Picoas">Picoas</option>
                <option value="Benfica">Benfica</option>
            </optgroup>
            <optgroup label="Porto">
                <option value="Felgueiras">Felgueiras</option>
                <option value="Maia">Maia</option>
            </optgroup>
        </select>
    </div>

the div's with the class name:

<div style="width: 90%; height: 50%; background-color: #09C; overflow: scroll; overflow-x: hidden; margin-bottom: 15%; margin-left: 5%; margin-right: 5%; text-align: left; color: #000; font-size: 60%;">
    <div class="Picoas" style="height: 30%; width: 100%; background-color: #CCEAFF; display:none;">
        Timberland Picoas<br />
        Centro Colombo Morada: Av. Lusíada, Centro Colombo Piso 1, Loja 1.095<br />
        1500-392 Lisboa
    </div>
    <div class="Felgueiras" style="height: 30%; width: 100%; background-color: #CCEAFF;
        margin-top: 2%;display:none;">
        Timberland Felgueiras<br />
        Centro Colombo Morada: Av. Lusíada, Centro Colombo Piso 1, Loja 1.095<br />
        1500-392 Lisboa
    </div>
    <div class="Picoas" style="height: 30%; width: 100%; background-color: #CCEAFF; margin-top: 2%;display:none;">
        Timberland Picoas<br />
        Centro Colombo Morada: Av. Lusíada, Centro Colombo Piso 1, Loja 1.095<br />
        1500-392 Lisboa
    </div>
    <div class="Felgueiras" style="height: 30%; width: 100%; background-color: #CCEAFF;
        margin-top: 2%;display:none;">
        Timberland Felgueiras<br />
        Centro Colombo Morada: Av. Lusíada, Centro Colombo Piso 1, Loja 1.095<br />
        1500-392 Lisboa
    </div>
    <div class="Benfica" style="height: 30%; width: 100%; background-color: #CCEAFF; margin-top: 2%;display:none;">
        Timberland Benfica<br />
        Centro Colombo Morada: Av. Lusíada, Centro Colombo Piso 1, Loja 1.095<br />
        1500-392 Lisboa
    </div>
    <div class="Maia" style="height: 30%; width: 100%; background-color: #CCEAFF; margin-top: 2%;display:none;">
        Timberland Maia<br />
        Centro Colombo Morada: Av. Lusíada, Centro Colombo Piso 1, Loja 1.095<br />
        1500-392 Lisboa
    </div>
    <div class="Benfica" style="height: 30%; width: 100%; background-color: #CCEAFF; margin-top: 2%;display:none;">
        Timberland Benfica<br />
        Centro Colombo Morada: Av. Lusíada, Centro Colombo Piso 1, Loja 1.095<br />
        1500-392 Lisboa
    </div>
    <div class="Maia" style="height: 30%; width: 100%; background-color: #CCEAFF; margin-top: 2%;display:none;">
        Timberland Picoas<br />
        Centro Colombo Morada: Av. Lusíada, Centro Colombo Piso 1, Loja 1.095<br />
        1500-392 Lisboa
    </div>
</div>

the script and the class definitions:

 <script type="text/javascript">
    function showstuff(element) {
        var elementsPicoas = document.getElementsByClassName("Picoas");
        elementsPicoas.style.display = element == "Picoas" ? "block" : "none";
         var elementsBenfica = document.getElementsByClassName("Benfica");
        elementsBenfica.style.display = element == "Benfica" ? "block" : "none";
         var elementsFelgueiras = document.getElementsByClassName("Felgueiras");
        elementsFelgueiras.style.display = element == "Felgueiras" ? "block" : "none";
         var elementsMaia = document.getElementsByClassName("Maia");
        elementsMaia.style.display = element == "Maia" ? "block" : "none";
    } 
</script>
     <style>
  .Picoas{}
  .Felgueiras{}
  .Benfica{}
  .Maia{} 
  </style>

Answer 1

Here's how to do it without jQuery!

function showstuff(selectedElementClass) {

    var elementClasses = [
        "Picoas",
        "Benfica",
        "Felgueiras",
        "Maia"
    ];

    for (var i = 0; i < elementClasses.length; i++) {
        var elements = document.getElementsByClassName(elementClasses[i]);

        for (var j = 0; j < elements.length; j++) {
            var element = elements[j];
            element.style.display = (element.className === selectedElementClass)? "block" : "none";
        }
    }
} 

You can see it in action here: https://tinker.io/38459/3

Answer 2

I would suggest using jQuery which enables you to do stuff like

$(".Picoas, .Benfica, .Felgueiras, .Maia").hide(); //hide them all
$("." + element).show(); //display only the selected one

Update

Sorry, this was too fast. The real problem is, that the getElementsByClassName function returns more than one element, because you have all the classes you are checking for 2 times in your code.

What you can do is - if you don't want to use jQuery - something like this:

function display(className, mode)
{
    var elms = document.getElementsByClassName(className);

    for (var i = 0; i < elms.length; i++)
    {
        elms[i].style.display = mode;
    }

}

function showstuff(element) 
{
    //hide 'em all
    var allElements = ["Picoas", "Benfica", "Felgueiras", "Maia"];

    for (var i = 0; i < allElements.length; i++)
    {
        display(allElements[i], "none");
    }

    //show the one selected
    display(element, "block");
} 

Answer 3

More efficient way to do this with jQuery:

<script type="text/javascript">
$(document).ready(function(){
   $("#changeme").change(function(){
     $(".dynamic").css("display", "none");
     $("."+this.value).css("display", "block");
   });
});
</script>

<style>
.dynamic
   {
       height: 30%; 
       width: 100%; 
       background-color: #CCEAFF; 
       margin-top: 2%;
       display:none;
   }
.Picoas{}
.Felgueiras{}
.Benfica{}
.Maia{} 
</style>

<div class="Picoas dynamic">
    Timberland Picoas<br />
    Centro Colombo Morada: Av. Lusíada, Centro Colombo Piso 1, Loja 1.095<br />
    1500-392 Lisboa
</div>
<div class="Felgueiras dynamic">
    Timberland Felgueiras<br />
    Centro Colombo Morada: Av. Lusíada, Centro Colombo Piso 1, Loja 1.095<br />
    1500-392 Lisboa
</div>
(etc.)

http://jsbin.com/welcome/47377/edit