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


        });
    }

Answer 1

这应do the trick for you。它是关于完全相同主题的先前回答的主题 - 如何根据另一个主题中的值填充下拉列表。它利用了jQuery（我在我之前使用它作为参考）。

基于多个选择元素填充表单

1 个答案: