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”中的“Trainer”部分变得动态？基于他们选择的头像？

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选择框的状态，然后才能更新第二个框