Javascript : Changer simplement les éléments d'une autre boîte de sélection ?

Question

Je développe une page d'inscription et je souhaite utiliser JS pour choisir dynamiquement la sélection d'avatars en fonction du sexe. Voici ce que j'ai jusqu'à présent

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

Et cela devrait mettre à jour les options en fonction du sexe :

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

Je n'arrive pas à comprendre le code ou les concepts des exemples, j'ai juste besoin d'un exemple pour savoir comment remplir 2-3 valeurs dans la boîte de sélection 'avatar' en fonction du sexe, féminin ou masculin, et aussi comment faire en sorte que la partie 'Trainer' de 'Trainer.gif' devienne dynamique ? en fonction de l'avatar qu'ils choisissent ?

Answer 1

Supprimez d'abord tous les éléments de la boîte de sélection :

le nom du formulaire est 'myform' et le nom de la boîte de sélection est 'master'.

document.myform.master.options.length=0

puis de repeupler avec de nouveaux éléments : ( en utilisant la fonction Options(text, value, defaultSelected, selected) objet)

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)

Il s'agit d'un moyen simple de modifier dynamiquement les valeurs de la boîte de sélection.

Vous devrez ajouter un if pour vérifier l'état du gender la boîte de sélection et ensuite vous pouvez mettre à jour votre deuxième boîte