javascript - 一个下拉菜单的结果由两个决定

Question

这是一个性别下拉菜单，用于确定制服费用。

 <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>

统一下拉菜单的成本

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

这是我的 javascript 代码，用于可靠的性别和制服

<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>

类(class)(年份)下拉菜单。

<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>

学费下拉菜单取决于所选学生的类(class)

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

用于类(class)和学费可靠下拉列表的Javascript。我确信有一种更短的方法，但这仍然有效。

<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>

如何让类(class)(年份)和性别下拉列表确定统一下拉列表中的值。例如。如果我选择女性和四年级，我应该在下拉列表中获得不同的值。

Answer 1

检查这个https://jsfiddle.net/egq427g0/3/

我修改了 childClass 以相应地选择 Gender 和 Class

如果在Class中选择0，则在childClass结束时调用calc函数来重置uniform