javascript - jquery/ajax populate second dropdown and trigger change event -

javascript - jquery/ajax populate second dropdown and trigger change event -

so managed populate 3 cascading dropdownboxes. issue though when 1 dropdown populated: it's first alternative isn't fired changed event.

here illustration 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 fire next dropdown using first alternative need switch twice.

using:

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

enables combobox, doesnt populate.

take @ reply http://stackoverflow.com/a/10547666

below modified version of sample code (for situation):

use val() alter value , trigger() manually fire event here's sample ( http://jsfiddle.net/v7qwd/3/ )

$('#timesheet-type') .val('your-option-value-here') .trigger('change');

you still have empty alternative (if necessary) on top of each list, , javascript code automatically set value (selected item) actual option.

javascript jquery ajax json