根据先前选择的字段（jQuery）动态更新下拉选项

Question

我正在尝试根据另一个也在动态更新的字段来动态填充WTForms下拉列表。我将其用于一个字段（当更改“集合”时，统计信息将自动填充），但无法使第二个字段更新时自动填充第三个字段。

当用户选择一个集合时，“统计”选项应自动填充。然后，当更改“统计”选项时，“度量”选项应自动填充。上一部分工作正常，但是当“统计”字段更改时，我无法获取“度量”选项。

这是jQuery：

$(function() {

    var dropdown = {
        collection: $('#select_collection'),
        statistic: $('#select_statistic'),
        metric: $('#select_metric')
    };

    updateStatistics();
    updateMetrics();

    function updateStatistics() {
        var send = {
            collection: dropdown.collection.val()
        };
        dropdown.statistic.attr('disabled', 'disabled');
        dropdown.statistic.empty();
        $.getJSON("{{ url_for('_get_statistics') }}", send, function(data) {
            data.forEach(function(item) {
                dropdown.statistic.append(
                    $('<option>', {
                        value: item[0],
                        text: item[1]
                    })
                );
            });
            dropdown.statistic.removeAttr('disabled');
        });
    }

    function updateMetrics() {
        var send = {
            collection: dropdown.collection.val(),
            statistic: dropdown.statistic.val()
        };
        dropdown.metric.attr('disabled', 'disabled');
        dropdown.metric.empty();
        if (typeof(dropdown.statistic.val()) === 'undefined') return; 
        $.getJSON("{{ url_for('_get_metrics') }}", send, function(data) {
            data.forEach(function(item) {
                dropdown.metric.append(
                    $('<option>', {
                        value: item[0],
                        text: item[1]
                    })
                );
            });
            dropdown.metric.removeAttr('disabled');
        });
    }

    dropdown.statistic.on('change', function() {
        updateMetrics();
        console.log("update metrics");
    });

    dropdown.collection.on('change', function() {
        updateStatistics();
        console.log("update statistics");
    });

});