php - 複数の選択要素に基づいてフォームに入力する

Question

以前の選択に基づいて変化する複数のドロップダウン選択をフォームに持たせたい。これが私がそれを機能させたい方法です。

<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 番目のボックスが機能しません。製品を言うには 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>');


        });
    }