I'm developing a registration page and wish to use JS to dynamically choose avatar selection based on gender. Here's what I have so far..

    <select name="gender">
       <option value="Male">Male
       </option>
       <option value="Female">Female
       </option>
    </select>

And that should update options in this based on gender:

    <select name="avatar">
       <option value="Trainer">Trainer
       </option>
    </select>
    <br />
    <img src="images/trainers/male/Trainer.gif" />

I can't wrap my head around example code or concepts, I just need an example of how to fill 2-3 values into the 'avatar' selectbox based on gender, female or male, also how can I make 'Trainer' part of 'Trainer.gif' become dynamic? based on the avatar they choose?