第二個選擇菜單更改根據第一個選擇菜單

Question

我想構建兩個選擇菜單，但第二個結果將基於第一個選擇。這兩個菜單都不需要從數據庫中檢索數據。這個網頁需要兩個動作，因此我無法使用PHP來執行它。由於第一次選擇，第一個動作是變化的。第二個動作是插入數據庫。從網上看，我推薦這樣做是爲了建立在JavaScript上。讀別人的帖子讓我非常困惑，因爲它們在某種意義上是不同的。

我想達到的目標：如果有人在品牌中選擇了宏碁，那麼只有屬於宏碁的型號纔會出現。蘋果也一樣。

宏基型號：的TravelMate，廣延，卓望
蘋果型號：的MacBook，MacBook Air上，MacBook Pro的

我不擅長編程，所以請多多包涵。我沒有在此編碼中插入任何JavaScript或PHP。如下圖所示

我的HTML代碼：

  <tr> 
     <td class="LABEL">Brand</td> 
     <td><select name="Brand" class="LABEL" id="Brand"> 
      <option selected="selected">Brand</option> 
      <option value="Acer">Acer</option> 
      <option value="Apple">Apple</option> 
     </select></td> 
     </tr>  
     <tr> 
     <td class="LABEL">Model</td> 
     <td><select name="Model" class="LABEL" id="Model"> 
      <option selected="selected">Model</option> 

      <option value="TravelMate">TravelMate</option> 
      <option value="Extensa">Extensa</option> 
      <option value="Aspire">Aspire</option> 

      <option value="MacBook">MacBook</option> 
      <option value="MacBook Air">MacBook Air</option> 
      <option value="MacBook Pro">MacBook Pro</option> 

     </select></td> 
     </tr> 

這將是巨大的，如果你能和我這個幫助。提前致謝。

Answer 1

以下是一種可能的解決方案。我已經改變了你的HTML，所以選項創建dinamicaly（更好的解決方案，如果你想以後添加更多的品牌和型號）。

Acer_models=new Array('TravelMate','Extensa','Aspire'); 
Apple_models=new Array('MacBook', 'MacBook Air', 'MacBook Pro'); 


function show_models(){ 

    brand=document.getElementById('Brand'); 
model=document.getElementById('Model'); 
model.options.length = 1; 
selected=brand.options[brand.selectedIndex].value; 
    if(selected=="Acer") { 
     arr=Acer_models; 
    } 
    else if(selected=="Apple") { 
     arr=Apple_models; 
    } 

    for(i=0;i<arr.length;i++) { 
var option = document.createElement("option"); 
option.text = arr[i]; 
model.add(option); 
     } 







} 

這裏的jsfiddle：http://jsfiddle.net/4w8zaywg/

附：線model.options.length = 1，將確保只有'模型'選項存在於變化事件...