2013-07-09 88 views
0

當客戶點擊他們想要的車庫時,他們選擇一個樓層,根據車庫選擇顯示不同的樓層。代碼的後半部分做同樣的事情。用戶選擇地板,然後他們選擇一個地點,根據地板選擇顯示不同地點。兩個代碼都能單獨工作,但當我嘗試將它們組合在一起時,Spot box在我選擇樓層時不顯示任何信息。PHP組合框依賴問題

<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

您還沒有在樓層選擇框中添加onChange事件。您需要添加

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

然後將工作:-)

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

}