Ergebnis eines Dropdown-Menüs, das durch zwei festgelegt wird

Question

Hier ist ein Dropdown-Menü für den Geschlechtsverkehr, das die Einheitskosten bestimmt.

<p>Gender: 
<select required name="gender" onchange="calc(this.id, 'uniform')" id="gender"> 
<option value="0" >Select...</option> 
<option value="male">Male</option> 
<option value="female">Female</option> 
</select> <p> 

Kosten für einheitliche Drop-Down-Menü

<p>Cost of Uniform: 
<select required name="uniform" id="uniform"> 
</select><p> 

Hier mein Javascript-Code für das zuverlässige Geschlecht und einheitlichen

<script> 
function calc(u1,u2){ 

var u1 = document.getElementById(u1); 
var u2 = document.getElementById(u2); 
u2.innerHTML = ""; 
if (u1.value == "male"){ 
var optionArray = ["|","24300|N24,300"]; 
} 
else if (u1.value == "female"){ 
var optionArray = ["|","26400|N26,400"]; 
} 
for(var option in optionArray){ 
var pair = optionArray[option].split("|"); 
var newOption = document.createElement("option"); 
newOption.value = pair[0]; 
newOption.innerHTML = pair[1]; 
u2.options.add(newOption); 
} 
} 
</script> 

Klasse (Jahr) im Dropdown-Menü.

<p>Class: 
<select required name="childClass" onchange="childClass(this.id, 'schoolFees')" id="childClass"> 
<option value="0" >Select...</option> 
<option value="prenursery">Pre Nursery</option> 
<option value="nursery">Nursery</option> 
<option value="reception">Reception</option> 
<option value="year1">Year One</option> 
<option value="year2">Year Two</option> 
<option value="year3">Year Three</option> 
<option value="year4">Year Four</option> 
<option value="year5">Year Five</option> 
<option value="year6">Year Six</option> 
</select> 
<p> 

Schulgebühren Dropdown-Menü, die auf Studenten-Klasse hängen

ausgewählt

<p>School Fees: 
<select required name="schoolFees" id="schoolFees"> 
</select> 

Javascript für die Klassen- und Schulgebühren zuverlässiger Drop-Down. Ich bin mir sicher, dass es eine kürzere Methode gibt, aber das funktioniert immer noch.

<script> 
function childClass(s1,s2){ 
    var s1 = document.getElementById(s1); 
    var s2 = document.getElementById(s2); 
s2.innerHTML = ""; 
if (s1.value == "prenursery"){ 
    var optionArray = ["|","145000|N145,000"]; 
} 
else if (s1.value == "nursery"){ 
    var optionArray = ["|","145000|N145,000"]; 
} 
else if (s1.value == "reception"){ 
    var optionArray = ["|","147000|N147,000"]; 
} 
else if (s1.value == "year1"){ 
    var optionArray = ["|","149000|N149,000"]; 
} 
else if (s1.value == "year2"){ 
    var optionArray = ["|","149000|N149,000"]; 
} 
else if (s1.value == "year3"){ 
    var optionArray = ["|","149000|N149,000"]; 
} 
else if (s1.value == "year4"){ 
    var optionArray = ["|","149000|N149,000"]; 
} 
else if (s1.value == "year5"){ 
    var optionArray = ["|","149000|N149,000"]; 
} 
else if (s1.value == "year6"){ 
    var optionArray = ["|","149000|N149,000"]; 
} 
for(var option in optionArray){ 
    var pair = optionArray[option].split("|"); 
    var newOption = document.createElement("option"); 
    newOption.value = pair[0]; 
    newOption.innerHTML = pair[1]; 
    s2.options.add(newOption); 
} 
} 
</script> 

Wie kann ich die Klasse (Jahr) und Geschlecht Dropdown den Wert in Uniform Dropdown bestimmen. Beispielsweise. Wenn ich Frau und Jahr 4 wähle, sollte ich einen anderen Wert im Dropdown-Menü erhalten.

Answer 1

Kontrolle dieses https://jsfiddle.net/egq427g0/3/

ich die childClass geändert haben dementsprechend die Auswahl von Gender und Class

Am Ende childClass Aufruf calc Funktion handeln einheitlich zurückgesetzt, wenn 0 in Class ausgewählt ist