我希望表单具有多个下拉选择,这些下拉选择会根据先前的选择而改变。这就是我希望它工作的方式。
<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>');
});
}