5级相互依赖的选择列表

5 level interdependent select list

本文关键字：选择 列表 依赖 5级      更新时间：2023-09-26

我很高兴有这样的地方，这样人们就可以回答他们的问题，即使是像我这样的初学者！我不知道要从这里走。

我正在尝试创建一个相互依赖的，列出汽车品牌，汽车型号，年份，驾驶员和规模。

我已经创建了字段，我可以填充汽车品牌和汽车型号，具体取决于所做的选择。我坚持如何根据前面框中所做的选择来填充"年份"字段。我知道第一个盒子需要一个功能。这是我的代码"

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

我希望你们能提供一些指导，因为我不知道该何去何从。

好的，这是一个很长的答案，我花了很长时间来准备，所以请耐心等待（并做好准备）。另外，如果您不想阅读本文，下面有一个jsFiddle。

最好将每辆车存储为单独的对象。如果您有数据库（或计划将来使用），这就是数据的存储方式。嵌套数组也会呈指数级痛苦，因此最好远离它们。因此，首先，我们将您的数据结构更改为：

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' }
];

首先，预先预置初始制作选择框：

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

完成此操作后，您需要设置一种过滤数据的方法。您将需要用于按所选选项过滤车辆并获取不同值的函数。下面的filter_vehicles()很糟糕，但我累了，很晚了，所以必须这样做。你最好让这个动态，会有一个简单的解决方案，但我的大脑现在炸了。

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;
}

然后，您需要更新选择框。您可以通过在每个单独的选择框上定位更改事件来手动执行此操作，但也可以通过将事件附加到所有选择框来动态执行此操作。我更喜欢这种方法，因为它在添加其他字段时不会增加开销。

$('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>')
    });
});

总而言之，你会得到这样的东西 jsFiddle： http://jsfiddle.net/8FHZK/

这在 SQL 中更容易。因此，如果你有一个数据库，你会在服务器上执行查询以返回过滤后的集，这删除了一些上面令人讨厌的代码。

我不知道为什么我手动编写了所有这些，因为可能有一个 jQuery 插件已经完成了这一切（而且更好）。但是，嘿，它完成了，我玩得很开心，并且所有代码都进行了注释，以帮助您学习:)

$('#years').change(function() {
  //do something like Populate models....
}

那么，有什么区别呢？

相关文章：