CODEWITHSUNDEEP
javascriptjqueryajaxjson
Goowik
Goowik

Reputation: 803

jquery/ajax populate second dropdown and trigger change event

So I managed to populate 3 cascading dropdownboxes. The issue though is when one dropdown is populated: it's first option isn't fired as a changed event.

Here is an example of 2 changes:

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

So to fire the next dropdown using the first option I need to switch twice.

using:

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

enables the combobox, but doesnt populate.

Upvotes: 0

Views: 3508

Answers (1)

Doku-so
Doku-so

Reputation: 366

Refer the answer here https://stackoverflow.com/a/10547666

Below is a modified code for your situation:

First set the val() and then trigger() the event to manually fire it
Here's a sample ( http://jsfiddle.net/v7QWd/3/ )

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

You could still have an empty option (if necessary) on top of each list, and from your JavaScript code automatically set the value (selected item) to the actual option.

Upvotes: 1

Related Questions