Jquery /ajax填充第二个下拉框并触发更改事件

jquery/ajax populate second dropdown and trigger change event

本文关键字：事件 ajax 填充 第二个 Jquery      更新时间：2023-09-26

所以我设法填充了3个级联的下拉框。问题是，当一个下拉菜单被填充时:它的第一个选项不会作为一个改变的事件被触发。

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

启用组合框，但不填充。

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

下面是针对您的情况修改的代码:

首先设置val()，然后触发()事件来手动触发它
下面是一个示例(http://jsfiddle.net/v7QWd/3/)

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

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

相关文章：