Question

我有一些困难使我的下一个下拉选项适用于此表单，当您选择一种格式然后被要求在下一个框中选择产品类型时，我需要另一个选项，一旦您选择产品类型，例如PS3耳机，您可以获得可供选择的产品列表。无法弄清楚如何让这个下一个框工作，这是我目前的进展。

http://jsfiddle.net/maximus83/r7MN9/639/

    <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

如果将数据规范化为单个数组，则可以根据用户输入过滤数据以填充选择。这也意味着多格式项目显示为每个设备的相关项目。

http://jsfiddle.net/fvL0qgrx/2/

HTML

<select id="device"></select>
<select id="item"></select>
<select id="product"></select>

的Javascript

var products = [
    { label: 'ps3 headset 1', category: 'headsets', devices: ['ps3'] },
    { label: 'ps3 headset 2', category: 'headsets', devices: ['ps3'] },
    { label: 'xbox headset 1', category: 'headsets', devices: ['xbox'] },
    { label: 'xbox headset 2', category: 'headsets', devices: ['xbox'] },
    { label: 'wii headset 1', category: 'headsets', devices: ['wii'] },
    { label: 'wii headset 2', category: 'headsets', devices: ['wii'] },
    { label: 'multi headset no wii', category: 'headsets', devices: ['ps3', 'xbox'] },
    { label: 'multi headset 1', category: 'headsets', devices: ['ps3', 'xbox', 'wii'] },

    { label: 'ps3 charger 1', category: 'chargers', devices: ['ps3'] },
    { label: 'ps3 charger 2', category: 'chargers', devices: ['ps3'] },
    { label: 'ps3 charger 3', category: 'chargers', devices: ['ps3'] },
    { label: 'xbox charger 1', category: 'chargers', devices: ['xbox'] },
    { label: 'wii charger 1', category: 'chargers', devices: ['wii'] },
    { label: 'wii charger 2', category: 'chargers', devices: ['wii'] },
    { label: 'multi charger no ps3', category: 'chargers', devices: ['wii', 'xbox'] }
];


var devices = [];
_.forEach(products, function(product){
    _.forEach(product.devices, function(device){
        if(devices.indexOf(device) === -1){
            devices.push(device);
        };
    });
});

var getCategoriesForDevice = function(device){
    var categories = _.chain(products)
        .filter(function(product){
            return product.devices.indexOf(device) !== -1;
        })
        .map(function(product){
            return product.category
        })
        .uniq()
        .value();
    return categories;
};


var getProductsForDeviceCategory = function(device, category){
    return _.filter(products, function(product){
        return product.category === category && product.devices.indexOf(device) !== -1;
    });
};



$(function() {

    var $device = $('#device');
    var $item = $('#item');
    var $product = $('#product');

    $device.html('<option value=></option>');
    _.forEach(devices, function(device){
        $device.append('<option>' + device + '</option>');
    });

    $device.on('change', function(evt){
        var $el = $(this);
        var value = $el.val();
        var data = [];
        if(value){
            data = getCategoriesForDevice(value);
        }
        $item.html('<option value=></option>');
        _.forEach(data, function(option){
            $item.append('<option>' + option + '</option>');
        }); 
    });

    $item.on('change', function(evt){
        var $el = $(this);
        var value = $el.val();
        var data = [];
        if(value){
            data = getProductsForDeviceCategory($device.val(), value);
        }
        $product.html('<option val=></option>');
        _.forEach(data, function(option){
            $product.append('<option>' + option.label + '</option>');
        }); 
    });

});

PS。不要使用eval - 这与将你的第一个孩子保证给魔鬼一致。

自动填充表单选项

1 个答案: