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代码自动将值（所选项目）设置为实际选项。

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

1 个答案: