当客户点击他们想要的车库时,他们会选择一个楼层,根据车库的选择显示不同的楼层。代码的后半部分做了同样的事情。用户选择地板然后他们选择一个地点,根据地板选择显示不同的地点。两个代码分别工作正常,但是当我尝试将它们组合在一起时,当我选择一个地板时,Spot框没有显示任何信息。
<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>
答案 0 :(得分:0)
您没有在地板选择框中添加onChange事件。你需要添加
<select name="floor" id="floor" onChange="floor_onchange()">
然后它会起作用: - )
答案 1 :(得分:0)
这个怎么样?不一样但仍然有效。而且你还错过了楼层选择框中的onChange功能。
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" onchange="floor_onchange();">
</select>
<br />
Spot:
<select name="spot" id="spot">
</select>
<script type="text/javascript">
function garage_onchange(){
var selGarageValue = document.getElementById("garage").value;
var selFloor = document.getElementById("floor");
if(selGarageValue=="Fordham"){
var html = '<option value="A1">A1</option>';
html += '<option value="B1">B1</option>';
selFloor.innerHTML = html;
}
else if(selGarageValue=="Kingsbridge"){
var html = '<option value="A2">A2</option>';
html += '<option value="B2">B2</option>';
selFloor.innerHTML = html;
}
}
function floor_onchange(){
var selFloorValue = document.getElementById("floor").value;
var selSpot = document.getElementById("spot");
if(selFloorValue=="A1" || selFloorValue=="A2"){
var html = '<option value="101">101</option>';
html += '<option value="102">102</option>';
html += '<option value="103">103</option>';
html += '<option value="104">104</option>';
html += '<option value="105">105</option>';
html += '<option value="106">106</option>';
html += '<option value="107">107</option>';
html += '<option value="108">108</option>';
html += '<option value="109">109</option>';
html += '<option value="110">110</option>';
selSpot.innerHTML = html;
}
else if(selFloorValue=="B1" || selFloorValue=="B2"){
var html = '<option value="201">201</option>';
html += '<option value="202">202</option>';
html += '<option value="203">203</option>';
html += '<option value="204">204</option>';
html += '<option value="205">205</option>';
html += '<option value="206">206</option>';
html += '<option value="207">207</option>';
html += '<option value="208">208</option>';
html += '<option value="209">209</option>';
html += '<option value="210">210</option>';
selSpot.innerHTML = html;
}
}