AJAX - Two Related Selects

I have two related selects - “fac_name” and “proceedure_type”.
Script below is working great when I select a fac_name, but I’ve got one problem:
When “fac_name” already has a selected value coming from my database, I’m not sure how to trigger that so the appropriate proceedure_type list is returned. Currently, it only works when I manually select a fac_name value.

Little help please…



First of all, change will really only be triggered when you call the event.

Will fac_name have a default value on page load? If so, you have two options. You can either make an AJAX call on page load outside the current function you have. Or simple enough, you can trigger the change event after the function is defined, like

  $(document).ready(function () {
    $("#fac_name").change(function () {
      var id = $(this).val();
      var dataString = 'id=' + id;
        type: "POST",
        url: "qry/ajax_proceedures.php",
        data: dataString,
        cache: false,
        success: function (html) {
    $('#fac_name').trigger('event'); // This will make the AJAX call with the value of the option that is currently selected.

fac_name will either be:

  1. a default value if you’ve hit the form for the first time
  2. a value from the database based on your previous selection if you’re returning to the form to make edits.

So technically, yes, it has a value that affects proceedure_type at all times.

Doesn’t seem to be working for me, but I understand what it’s doing.
Still playing with it…

Oh man, my bad. There was a typo. The correct code snippet is $('#fac_name').trigger('change');

Sorry about that!

1 Like

Found that just a few seconds before I got your reply!
Thanks very much!! Works a treat now!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.