顧客が希望するガレージをクリックしてフロアを選択すると、ガレージの選択に応じて異なるフロアが表示されます。コードの後半は同じことを行います。ユーザーはフロアを選択してからスポットを選択します。フロアの選択に応じて異なるスポットが表示されます。両方のコードは個別に正常に機能しますが、それらを組み合わせようとすると、フロアを選択したときにスポット ボックスに情報が表示されません。
<script>
function garage_onchange(){
var selGarageValue = document.getElementById("garage").value;
var selFloor = document.getElementById("floor");
for(var i=selFloor.options.length-1;i>=0;i--){
selFloor.remove(i);
}
if(selGarageValue=="Fordham"){
var option = document.createElement('option');
option.text = "A1";
option.value="A1";
selFloor.add(option);
option = document.createElement('option');
option.text = "B1";
option.value="B1";
selFloor.add(option);
}
else if(selGarageValue=="Kingsbridge"){
var option = document.createElement('option');
option.text = "A2";
option.value="A2";
selFloor.add(option);
option = document.createElement('option');
option.text = "B2";
option.value="B2";
selFloor.add(option);
}
}
function floor_onchange(){
var selFloorValue = document.getElementById("floor").value;
var selSpot = document.getElementById("spot");
for(var i=selSpot.options.length-1;i>=0;i--){
selSpot.remove(i);
}
if(selFloorValue=="A1"){
var option = document.createElement('option');
option.text = "101";
option.value="101";
selSpot.add(option);
option = document.createElement('option');
option.text = "102";
option.value="102";
selSpot.add(option);
option = document.createElement('option');
option.text = "103";
option.value="103";
selSpot.add(option);
option = document.createElement('option');
option.text = "104";
option.value="104";
selSpot.add(option);
option = document.createElement('option');
option.text = "105";
option.value="105";
selSpot.add(option);
option = document.createElement('option');
option.text = "106";
option.value="106";
selSpot.add(option);
option = document.createElement('option');
option.text = "107";
option.value="107";
selSpot.add(option);
option = document.createElement('option');
option.text = "108";
option.value="108";
selSpot.add(option);
option = document.createElement('option');
option.text = "109";
option.value="109";
selSpot.add(option);
option = document.createElement('option');
option.text = "110";
option.value="110";
selSpot.add(option);
;
}
else if(selFloorValue=="B1"){
var option = document.createElement('option');
option.text = "201";
option.value="201";
selSpot.add(option);
option = document.createElement('option');
option.text = "202";
option.value="202";
selSpot.add(option);
option = document.createElement('option');
option.text = "203";
option.value="203";
selSpot.add(option);
option = document.createElement('option');
option.text = "204";
option.value="204";
selSpot.add(option);
option = document.createElement('option');
option.text = "205";
option.value="205";
selSpot.add(option);
option = document.createElement('option');
option.text = "206";
option.value="206";
selSpot.add(option);
option = document.createElement('option');
option.text = "207";
option.value="207";
selSpot.add(option);
option = document.createElement('option');
option.text = "208";
option.value="208";
selSpot.add(option);
option = document.createElement('option');
option.text = "209";
option.value="209";
selSpot.add(option);
option = document.createElement('option');
option.text = "210";
option.value="210";
selSpot.add(option);
}
else if(selFloorValue=="A2"){
var option = document.createElement('option');
option.text = "101";
option.value="101";
selSpot.add(option);
option = document.createElement('option');
option.text = "102";
option.value="102";
selSpot.add(option);
option = document.createElement('option');
option.text = "103";
option.value="103";
selSpot.add(option);
option = document.createElement('option');
option.text = "104";
option.value="104";
selSpot.add(option);
option = document.createElement('option');
option.text = "105";
option.value="105";
selSpot.add(option);
option = document.createElement('option');
option.text = "106";
option.value="106";
selSpot.add(option);
option = document.createElement('option');
option.text = "107";
option.value="107";
selSpot.add(option);
option = document.createElement('option');
option.text = "108";
option.value="108";
selSpot.add(option);
option = document.createElement('option');
option.text = "109";
option.value="109";
selSpot.add(option);
option = document.createElement('option');
option.text = "110";
option.value="110";
selSpot.add(option);
}
else if(selFloorValue=="B2"){
var option = document.createElement('option');
option.text = "201";
option.value="201";
selSpot.add(option);
option = document.createElement('option');
option.text = "202";
option.value="202";
selSpot.add(option);
option = document.createElement('option');
option.text = "203";
option.value="203";
selSpot.add(option);
option = document.createElement('option');
option.text = "204";
option.value="204";
selSpot.add(option);
option = document.createElement('option');
option.text = "205";
option.value="205";
selSpot.add(option);
option = document.createElement('option');
option.text = "206";
option.value="206";
selSpot.add(option);
option = document.createElement('option');
option.text = "207";
option.value="207";
selSpot.add(option);
option = document.createElement('option');
option.text = "208";
option.value="208";
selSpot.add(option);
option = document.createElement('option');
option.text = "209";
option.value="209";
selSpot.add(option);
option = document.createElement('option');
option.text = "210";
option.value="210";
selSpot.add(option);
}
}
</script>
Garage:
<select id="garage" name="garage" onchange="garage_onchange();">
<option value="S" selected="selected">-Choose Garage-</option>
<option value="Fordham">Fordham</option>
<option value="Kingsbridge">Kingsbridge</option>
</select>
<br />
Floor:
<select name="floor" id="floor">
</select>
<br />
Spot:
<select name="spot" id="spot">
</select>