title: jquery/ajax populate second dropdown and trigger change event
body: <p>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.</p>
  
  <p>Here is an example of 2 changes:</p>
  
  <pre><code>$('#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("&lt;option value='" + element.id + "'&gt;" + element.first_name + "&lt;/option&gt;");
                  });
              });
          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("&lt;option value='" + element.id + "'&gt;" + element.name + "&lt;/option&gt;");
              });
          });
  });
  </code></pre>
  
  <p>So to fire the next dropdown using the first option I need to switch twice.</p>
  
  <p>using:</p>
  
  <pre><code>clients.change()
  /* or */
  clients.trigger('change');
  </code></pre>
  
  <p>enables the combobox, but doesnt populate.</p>