0

当客户点击他们想要的车库时，他们会选择一个楼层，该楼层会根据车库选择显示不同的楼层。代码的后半部分做同样的事情。用户选择楼层，然后他们选择一个地点，根据楼层选择显示不同的地点。两个代码单独工作都很好，但是当我尝试将它们组合在一起时，当我选择一个楼层时，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>
4

2 回答 2

0

您尚未在楼层选择框中添加 onChange 事件。你需要添加

<select name="floor" id="floor" onChange="floor_onchange()">

然后它将起作用:-)

于 2013-07-09T05:32:36.470 回答
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;
    }

}

于 2013-07-09T05:52:32.277 回答