jquery选择列表自动填充加载

Question

我正在尝试将我的OLDSCHOOL javascript选择列表函数转换为jquery ..

我已经完成了工作（大部分时间），但它并不漂亮......一件事不起作用的是当页面加载时，我希望3个选择列表已预先加载唯一数据，虽然只加载第一个（CLIENT），然后等待'更改'触发器填充下面的那个，依此类推......

我已经研究过，有很多例子可以做到这一点，但是我已经尝试了一段时间，并且无法让它们中的任何一个工作..我得到它的唯一方法是这样做...也许有人可以帮助我？

JS：

    ////// TASK SELECT LIST
$('#projectSelect').on('change', function() {
    $.getJSON('cpp.php?task='+this.value, function(data) {
        var select = $('#taskSelect');
        select.empty();

        $.each(data, function(key, val){
        select.append("<option value='"+this.id+"'>"+this.label+"</option>");
        });
    });
})

    ////// PROJECT SELECT LIST
$('#clientSelect').on('change', function() {
    $.getJSON('cpp.php?client='+this.value, function(data) {
        var select = $('#projectSelect');
        select.empty();

        $.each(data, function(key, val){
        select.append("<option value='"+this.id+"'>"+this.label+"</option>");
        });
    });
})

    ////// CLIENT SELECT LIST
    $.getJSON('cpp.php', function(data) {
        var select = $('#clientSelect');
        $.each(data, function(key, val){
        select.append("<option value='"+this.id+"'>"+this.label+"</option>");
        });

    });

图像：