Javascript: Simply change items in another select box?

Question

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?

Answer 1

First remove all elements in select box:

the form name is 'myform' and the name of the select box is 'master'

document.myform.master.options.length=0

then repopulate with new items: ( using the Options(text, value, defaultSelected, selected) object)

document.myform.master.options[0]=new Option("Sports", "sportsvalue", true, false)
document.myform.master.options[1]=new Option("Music", "musicvalue", false, false)
document.myform.master.options[2]=new Option("Movies", "moviesvalue", false, false)

This is a simple way you can dynamically change the select box's values.

You'll need to add an if statement to check the state of the gender select box and then you can update your second box