I have the situation where in the first instance I would like all divs to be visible.

Only when the user selects something in a select menu the non selected divs will hide.

I have the following:

Code:
 <select name="type">
            <option value="ShowAll">1</option>
            <option value="Selection1">1</option>
            <option value="Selection2">2</option>
            <option value="Selection3">3</option>
            <option value="Selection4">4</option>
        </select>
        <div class="Selection1">
            Selection 1
        </div>
        <div class="Selection2">
            Selection 2
        </div>
        <div class="Selection4">
            Selection 4
        </div>
        <div class="Selection3">
            Selection 3
        </div>
        <div class="Selection3">
            Selection 3
        </div>
        <div class="Selection1">
            Selection 1
        </div>

So, if the user were to select "Selection1" two divs should only be visible. The same will apply for others, if "selection4" is made then only one div would be visible.

The user will need to the option to reset and display all divs by using the "ShowAll" selector.

I ahve seen examples of this on the net however, they do not show all the divs in the first instance and they are donhe by ID and not class. I need to do it by class as I have some with the same name and they cannot change.

I appreciate comments/help