jquery/ajax 填充第二个下拉列表并触发更改事件

Question

所以我设法填充了 3 个级联下拉框。 但问题是当填充一个下拉列表时：它的第一个选项不会作为更改的事件触发。

以下是 2 个更改的示例：

$('#timesheet-type').change(function () {
    var clients = $('#timesheet-client');
    var projects = $('#timesheet-project');
    if ($(this).val() == 'project') {
        $.getJSON("timesheets/populateClients",
            function (data) {
                var model = clients;
                model.empty();
                $.each(data, function (index, element) {
                    model.append("<option value='" + element.id + "'>" + element.first_name + "</option>");
                });
            });
        clients.prop('disabled', false);
        clients.change();
    } else {
        clients.prop('disabled', true);
        projects.prop('disabled', true);
    }
});

$('#timesheet-client').change(function () {
    $('#timesheet-project').prop('disabled', false);
    $.getJSON("timesheets/populateProjects",
        { option: $(this).val() },
        function (data) {
            var model = $('#timesheet-project');
            model.empty();
            $.each(data, function (index, element) {
                model.append("<option value='" + element.id + "'>" + element.name + "</option>");
            });
        });
});

所以要使用第一个选项触发下一个下拉菜单，我需要切换两次。

使用：

clients.change()
/* or */
clients.trigger('change');

启用组合框，但不填充。

Answer 1

参考答案https://stackoverflow.com/a/10547666

以下是根据您的情况修改的代码：

先设置 val() 然后 trigger() 手动触发事件
Here's a sample (http://jsfiddle.net/v7QWd/3/)

$('#timesheet-type')
         .val('YOUR-OPTION-VALUE-HERE')
         .trigger('change');

您仍然可以在每个列表顶部有一个空选项（如果需要），并从您的 JavaScript 代码自动将值（选定项）设置为实际选项。