Javascript: просто изменить элементы в другом окне выбора?

Question

Я занимаюсь разработкой страницы регистрации и хочу использовать JS для динамического выбора аватара в зависимости от пола. Вот то, что у меня есть до сих пор ..

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

И это должно обновить параметры в зависимости от пола:

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

Я не могу обернуться вокруг примера кода или концепций, мне просто нужен пример того, как заполнить 2-3 значения в поле выбора «аватар» в зависимости от пола, женщины или мужчины, а также как я могу сделать «Тренер» часть Trainer.gif стала динамичной? на основе аватара они выбирают?

Answer 1

Сначала удалите все элементы в поле выбора:

имя формы - «myform», а имя поля выбора - «master»

document.myform.master.options.length=0

, затем заполните новые элементы: (используя объект Options(text, value, defaultSelected, selected))

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)

Это простой способ динамического изменения значений в блоке выбора.

Вам нужно будет добавить оператор if, чтобы проверить состояние поля выбора gender, а затем вы можете обновить второй блок