根據其他下拉列表的選擇填充一個下拉列表

Question

我想創建兩個下拉列表，類別和項目。

如果我選擇一個名爲汽車的類別，那麼項目下拉列表應該有本田，沃爾沃，日產。

如果我選擇一個名爲手機的類別，那麼項目下拉列表中應該有這個iPhone，三星，諾基亞。

我該怎麼做？ 我知道我不能用純HTML完成它。

Answer 1

工作演示http://jsfiddle.net/kasperfish/r7MN9/3/（用jQuery）

cars=new Array("Mercedes","Volvo","BMW","porche"); 
phones=new Array('Samsung','Nokia','Iphone'); 

populateSelect(); 

$(function() { 

     $('#cat').change(function(){ 
     populateSelect(); 
    }); 

}); 


function populateSelect(){ 
    cat=$('#cat').val(); 
    $('#item').html(''); 


    if(cat=='car'){ 
     cars.forEach(function(t) { 
      $('#item').append('<option>'+t+'</option>'); 
     }); 
    } 

    if(cat=='phone'){ 
     phones.forEach(function(t) { 
      $('#item').append('<option>'+t+'</option>'); 
     }); 
    } 

} 

修訂：使用eval（），以便能夠爲您想添加儘可能多的陣列。 JSFIDDLE DEMO

cars=new Array("Mercedes","Volvo","BMW","porche"); 
phones=new Array('Samsung','Nokia','Iphone'); 
names=new Array('Kasper','Elke','Fred','Bobby','Frits'); 
colors=new Array('blue','green','yellow'); 

populateSelect(); 

$(function() { 

     $('#cat').change(function(){ 
     populateSelect(); 
    }); 

}); 


function populateSelect(){ 
    cat=$('#cat').val(); 
    $('#item').html(''); 

     eval(cat).forEach(function(t) { 
      $('#item').append('<option>'+t+'</option>'); 
     }); 
    } 

Answer 2

根據您的最終目標是什麼，您可以通過多種方式實現此目標。這是最常見的兩個。

這是基本過程：

1. 加載頁與填充選項的初始下拉列表中，我們假設類別（汽車，卡車，SUV）和禁止的項目下拉。
2. 用戶選擇從第一個下拉的值，也有一些方法來處理這個問題：

AJAX（用最少的頁面負載是最完美的體驗）：

1. 使用JavaScript發向PHP腳本（或任何其他處理程序）發出的ajax請求，其中包含從類別下拉列表中選擇的選項的值作爲發佈或請求參數。
2. 根據我們的類別檢索項目下拉列表的值，這些值可能來自我們的數據庫，變量，靜態文件或您可以使用的任何其他方法
3. 返回我們的值作爲響應到AJAX請求（json，xml，明文，任何適合你的最適合你的，你最喜歡使用的）
4. 使用Javascript（或者你可以使用類似jQuery的庫），我們將返回的選項從我們的AJAX請求插入到項目下拉並啓用它，以便用戶可以進行選擇。
5. 從這裏我們可以繼續使用AJAX請求和響應，也可以POST形式返回最終頁面，或者無論您的特定用途需要什麼。

如果您不想使用AJAX，您可以非常輕鬆地將表單發佈到服務器端處理程序，從類別下拉列表中獲取值，找到項目下拉列表的值以及然後呈現您爲其設置類別下拉列表值的HTML響應並將其禁用（因此，如果用戶想要更改類別，則必須使用後退按鈕）並填充項目下拉列表。