Listes liées et nombre d'options

Bonjour,

J'ai un problème entre HTML5 et Javascript.
J'ai deux select/option qui se suivent et s'influencent. :
- le premier de trois éléments me donne le choix sur trois tableaux différents et de nombre d'élément eux aussi différents.
- le second est donc déduit du premier et me donne le choix sur des liste de 6 ou 5 éléments.

Si je choisis "armes_de_guerre", la seconde liste me donne 5 choix.
Je change et choisis "armes_courantes", la seconde liste me donne 6 choix.
Je rechange et choisis "armes_exotiques", la seconde liste me donne 6 choix au lieu des 5 attendus. En faite c'est le 6ème choix de "armes_de_guerre" qui s'incruste.

Comment faire pour l'enlever ?

HTML

Code:

1
2
3
4
5
6
7
8
9
10
<h2 id="label_famille_arme_I">FAMILLE</h2> 
<h2 id="label_famille_arme_b_I">D'ARME</h2> 
<select id="famille_arme_I" name="famille_arme" onChange="choixFamilleArme()">
    <option></option>
    <option value="armes_courantes">Armes courantes</option>
    <option value="armes_de_guerre">Arme de guerre</option>
    <option value="armes_exotiques">Arme exotiques</option>
</select>
<h2 id="label_maniement_arme_I">MANIEMENT</h2> 
<select id="maniement_arme_I" name="maniement_arme" onChange="choixManiementArme()"></select>

Javascript

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
function choixFamilleArme() {
    var armes_courantes = new Array();
    var armes_de_guerre = new Array();
    var armes_exotiques = new Array();
    armes_courantes = ["","Combat à mains nues","Armes légères","Armes à une main","Armes à deux mains","Armes à distante"];
    armes_de_guerre = ["","Armes légères","Armes à une main","Armes à deux mains","Armes à distante"];
    armes_exotiques = ["","Armes légères","Armes à une main","Armes à deux mains","Armes à distante"];
    switch(document.form.famille_arme_I.value) {
	case "armes_courantes" :
		for (var nombElement = 0; nombElement < armes_courantes.length; nombElement++) {
			document.form.maniement_arme_I.options[nombElement] = 
                        new option(armes_courantes[nombElement],armes_courantes[nombElement]);
		};
		break;
	case "armes_de_guerre" :
		for (var nombElement = 0; nombElement < armes_de_guerre.length; nombElement++) {
			document.form.maniement_arme_I.options[nombElement] = 
                        new Option(armes_de_guerre[nombElement],armes_de_guerre[nombElement]);
		};
		break;
	case "armes_exotiques" :
		for (var nombElement = 0; nombElement < armes_exotiques.length; nombElement++) {
			document.form.maniement_arme_I.options[nombElement] = 
                        new Option(armes_exotiques[nombElement],armes_exotiques[nombElement]);
		};
		break;
	}
}

J'attends votre aide. :(

Bonjour,

ça marchera peut-être en réinitialisant la liste ou supprimant le dernier élément :
Code:

1 2 3 4 document.getElementById("maniement_arme_I").length = 0; ou document.form.maniement_arme_I.options[document.form.maniement_arme_I.length-1] = null; document.form.maniement_arme_I.size=document.form.maniement_arme_I.size-1;
C'est pour du D&D / Pathfinder ?

En réinitialisant cela marche.

Merci pour ton aide.

C'est pour du D&D 3.5.

Ceci dit, ton code est largement optimisable...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
function choixFamilleArme() {
    var armes = {
        armes_courantes: ["","Combat à mains nues","Armes légères","Armes à une main","Armes à deux mains","Armes à distante"],
        armes_de_guerre: ["","Armes légères","Armes à une main","Armes à deux mains","Armes à distante"],
        armes_exotiques: ["","Armes légères","Armes à une main","Armes à deux mains","Armes à distante"]
    }
    var arme = armes[document.form.famille_arme_I.value];
    var listeArme = document.getElementById("maniement_arme_I");
    listeArme.length = 0;
    for(var i = 0; i < arme.length; i++){
        listeArme.options[i] = new option(arme[i],arme[i]);
    }
}