problem with a form

problem with a form

Hi everyone!

I've got a very simple form:

  1. <label for="zodiac">Choose your zodiac sign:</label>
        <select name="zodiac" size="1">
            <optgroup label="Your zodiac sign:">
                <option value="leo">Leo</option>
                <option value="virgo">Virgo</option>
            </optgroup>
        </select>

    <label for="more">Tell me more about you:</label>
        <select name="more" id="leo" size="1">
            <optgroup label="Tell me exacly about your leo sign:">
                <option value="first">I am from July</option>
                <option value="second">"I am from August"</option>
            </optgroup>   
        </select>

        <select name="more" id="virgo" size="1">
            <optgroup label="Tell me exacly about your virgo sign:">
                <option value="first">"I am from August</option>
                <option value="second">"I am' from September"</option>
            </optgroup>
        </select>






















Both of  #virgo and #leo elements are hidden (display:none).
My question is how to make visible one of this elements after i choose right option from Zodiac sign?