4

我很高兴有这样的地方可以让人们解决他们的问题，即使是像我这样的初学者！我不知道要离开这里。

我正在尝试创建一个相互依赖的列表，其中列出了汽车制造商、汽车型号、年份、驱动程序和规模。

我已经创建了字段，我可以根据所做的选择填充汽车品牌和汽车型号。我被困在如何根据前面框中的选择填充“年份”字段。我知道第一个盒子需要一个功能。这是我的代码”

HTML：

<form name="selectionForm">
    <select name="makes" id="makes" size="3" style="width:125px">
        <option selected>Select a Make>></option>
    </select>
    <select name="models" id="models" size="3" style="width:125px"></select>
    <select name="years" id="years" size="3" style="width:125px"></select>
    <select name="drivers" id="drivers" size="3" style="width:125px"></select>
    <select name="scales" id="scales" size="3" style="width:125px"></select>
</form>

JavaScript：

jQuery(function($) {
    initModels();

    function initModels() {
        var makesAndModels = {
            'Ford': ['Fiesta', 'Focus', 'Mondeo'],
            'Vauxhall': ['Astra', 'Cavalier', 'Vectra']
        };

        // Populate makes
        $.each(makesAndModels, function (k, v) {
            $('#makes').append('<option>' + k + '</option>');
        });

        // Populate models
        $('#makes').change(function() {
            var $models = $('#models');

            $models.html("");

            var models = makesAndModels[$(this).val()];

            $.each(models, function (k, v) {
                $models.append('<option>' + v + '</option>');
            });
        });
    }
});

我非常感谢你们自己的一些指导，因为我不知道从这里去哪里。

4

2 回答 2

7

Ok, so this is a long answer, and has taken me a long time to prepare, so bear with me (and get ready). Also, there is a jsFiddle below if you don't want to read this essay.

You'll be much better off storing each car as an individual object. If you have a database (or plan to have on in the future), this is how your data will be stored. Nested arrays also get exponentially painful, so it's best to stay clear of them. So to begin, we'll change your data structure to this:

var vehicles = [
    { make: 'Ford', model: 'Fiesta', year: '2001', driver: 'me', scale: '1:43' },
    { make: 'Ford', model: 'Fiesta', year: '2005', driver: 'me', scale: '1:33' },
    { make: 'Ford', model: 'Focus', year: '1999', driver: 'you', scale: '1:18' },
    { make: 'Ford', model: 'Modeo', year: '1998', driver: 'Nigel Mansell', scale: '1:43' },
    { make: 'Vauxhall', model: 'Astra', year: '2002', driver: 'James Thompson', scale: '1:43' },
    { make: 'Vauxhall', model: 'Vectra', year: '2000', driver: 'Jason Plato', scale: '1:18' }
];

First thing's first, pre-propuate the initial makes select box:

var makes = get_distinct(vehicles, 'make');
$.each(makes, function(index, value) {
   $('select#make').append('<option value="' + value + '">' + value + '</option>')
});

Once you've that, you need to set up a way to filter the data. You'll need functions for filtering the vehicles by the selected options, and getting distinct values. The below filter_vehicles() is horrible, but I'm tired and it's late, so it'll have to do. You'd be better off making this dynamic, and there'll be an easy solution, but my brain is fried right now.

function filter_vehicles() {
    return $.grep(vehicles, function(n, i) {
        if ($('#driver').val() != '')
            return n.make == $('#make').val() && n.model == $('#model').val() && n.year == $('#year').val() && n.driver == $('#driver').val();
        if ($('#year').val() != '')
            return n.make == $('#make').val() && n.model == $('#model').val() && n.year == $('#year').val();
        if ($('#model').val() != '')
            return n.make == $('#make').val() && n.model == $('#model').val();
        else
            return n.make == $('#make').val();
    });
}

// returns distinct properties from an array of objects
function get_distinct(array, property) {
   var arr = [];

   $.each(array, function(index, value) {
       if ( $.inArray(value[property], arr) == -1 ) {
           arr.push(value[property]);
       }
   });

   return arr;
}

Then you'll need to update the select boxes. You can do it manually by targeting the change event on each individual select box, but you can also do it dynamically by attaching an event to all select boxes. I prefer this method, because it adds no overhead when adding additional fields.

$('select').change(function() {
    // don't execute if this is the last select element
    if ($(this).is(':last')) return;

    // clear all of the following select boxes, leaving a blank option
    $(this).nextAll().html('<option></option>');

    // get list of vehicles filtered by all the previous parameters
    var filtered_vehicles = filter_vehicles();

    // get the next select element
    var next = $(this).next();

    // get the distinct values from our list of filtered vehicles
    var values = get_distinct(filtered_vehicles, next.attr('id'));

    // append our options
    $.each(values, function(index, value) {
        next.append('<option value="' + value + '">' + value + '</option>')
    });
});

All in all, you'll get something like this jsFiddle: http://jsfiddle.net/8FHZK/

This is all easier in SQL. So if you do have a database, you'd execute queries on the server to return the filtered set, which cuts out a bit of the yucky code above.

I have no idea why I wrote all this manually, because there's probably a jQuery plugin that already does it all (and better). But hey, it's done, I had fun, and all the code is commented to assist in your learning :)

于 2012-04-10T10:29:30.637 回答
0 
$('#years').change(function() {
  //do something like Populate models....
}

So, what's the difference?

于 2012-04-10T05:17:27.820 回答