基於多個選擇元素填充表格

我想要一個表格具有多個下拉選擇，基於上一個選擇進行更改。這是我希望它工作的方式。基於多個選擇元素填充表格

<select id="format"> 
<option selected="selected" value="NULL">-- Select a product Format --</option> 
<option value="PS3">PS3</option> 
<option value="Xbox 360">Xbox 360</option> 
<option value="Wii U">Wii U</option> 
</select>

所以，如果你選擇PS3你再面臨着PS3產品類型更多的選擇

<select id="ps3-product-type"> 
<option selected="selected" value="NULL">-- Select a product PS3 product type --</option> 
<option value="chargers">chargers</option> 
<option value="controllers">controllers</option> 
<option value="headsets">headsets</option> 
</select>

，那麼你選擇，例如耳機，你會得到另一套產品最終選擇

<select id="ps3-headsets"> 
<option selected="selected" value="NULL">-- Select a PS3 headset --</option> 
<option value="product-1">product 1</option> 
<option value="product 2">product 2</option> 
<option value="product 3">product 3</option> 
</select>

我該如何使用jQuery或PHP來做到這一點？請記住，我也會選擇Xbox 360和Wii U。

更新進度： http://jsfiddle.net/maximus83/r7MN9/639/

這裏是我的HTML，我已經拿到了第一套用於選擇產品類型的工作陣列，但我不能讓第三箱的工作，我需要3盒的說法產品，我在哪裏可以從這裏出發。

<select id="cat"> 
    <option val="PS3">PS3</option> 
    <option val="Xbox360">Xbox360</option> 
    <option val="WiiU">WiiU</option> 
    <option val="Multiformat">Multiformat</option> 
</select> 

<select id="item"> 

</select> 

<select id="product"> 

</select>

這裏是我的腳本

PS3=new Array('Headsets(PS3)','Controllers(PS3)','Chargers(PS3)','Cables(PS3)'); 
Xbox360=new Array('Headsets(360)','Chargers(360)'); 
WiiU=new Array('Controllers(WiiU)','Headsets(WiiU)'); 
Multiformat=new Array('Headsets(Multi)','Chairs(Multi)','Cables(Multi)'); 

populateSelect(); 

$(function() { 

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

}); 


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

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


     }); 
    }

來源

2014-09-12 user1236630

你有沒有在你的網頁上可用的所有選擇框，或者你要獲取它們的運行時？ – 2014-09-12 12:35:48

使用ajax（你可以用jQuery做到這一點）。您可以通過Javascript對PHP腳本執行異步請求，答案可以用於填充其他下拉框。 – 2014-09-12 12:36:28

看到[this]（http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/Q_28398943.html）如果對你有用 – 2014-09-12 12:38:42

這應該do the trick for you。這是以前在同一主題上回答的線索 - 如何根據另一個值中的值填充下拉列表。它利用了jQuery（而且我以前用它作爲參考）。

來源

2014-09-12 12:44:19 iamgory

作爲一個凝視點，它無法讓我的第三個選擇框工作。 – user1236630 2014-09-12 16:28:32

基於多個選擇元素填充表格

回答

相關問題