0

我希望表单具有多个下拉选择，这些下拉选择会根据先前的选择而改变。这就是我希望它工作的方式。

<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，我有第一组用于选择产品类型的数组，但我无法让第三个框工作，我需要第三个框来说明产品，我从这里去哪里。

    <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>');


        });
    }
4

1 回答 1

0

这应该为您解决问题。这是关于完全相同主题的先前回答的线程 - 如何根据另一个值填充下拉列表。它利用了 jQuery（我之前已经使用它作为参考）。

于 2014-09-12T12:44:19.173 回答