Change select options with ajax based on previous select

Question

I am trying to update three linked Country -> Province -> City select box based on the previous select selection. The second part of my javascript is not working

$(document).ready(function() {


            var $country = $('#person_country');
            var $province = $('#person_province');

            $country.change(function () {
                // ... retrieve the corresponding form.
                var $form = $(this).closest('form');
                var data = {};
                data[$country.attr('name')] = $country.val();
                // Submit data via AJAX to the form's action path.
                $.ajax({
                    url: $form.attr('action'),
                    type: $form.attr('method'),
                    data: data,
                    success: function (html) {
                        // Replace current field ...
                        $('#person_province').replaceWith(
                            // ... with the returned one from the AJAX response.
                            $(html).find('#person_province')
                        );
                    }
                });
            });


            $province.change(function () {
                // ... retrieve the corresponding form.
                var $form = $(this).closest('form');
                // Simulate form data, but only include the selected value.
                var data = {};
                data[$province.attr('name')] = $province.val();
                // Submit data via AJAX to the form's action path.
                $.ajax({
                    url: $form.attr('action'),
                    type: $form.attr('method'),
                    data: data,
                    success: function (html) {
                        $('#person_city').replaceWith(
                            // ... with the returned one from the AJAX response.
                            $(html).find('#person_city')
                        );
                    }
                });
            });
        });

The second change function does not work. What am I doing wrong? Is there a way to call twice change and ajax functions?

Does not work ? Do you mean the change function is not called ? or something causes to break the flow ? Did you debug to see if the change listener is called at all ? — Deepika Guliani, Mar 10 '20 at 16:34
@webdevfagbok thanks. I am afraid the second change is not called at all. If I alert inside it, the alert never shows. — Sarpo, Mar 10 '20 at 16:46
`$('#person_province').replaceWith(` replaces the old #person_province *along with any events*. So your new #person_province doesn't have a change event associated with it. Either (re-)add the associated event or use event delegation. — freedomn-m, Mar 10 '20 at 16:51
Does this answer your question? [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — freedomn-m, Mar 10 '20 at 16:52
Or doesn't use `.replaceWith`, eg `$("#person_province").html($(html).find("#person_province").html())` — freedomn-m, Mar 10 '20 at 16:53
@freedomn-m It works now! You made my day! Really thankful. I will dig into your solution to learn more about my mistake. If you like to post a complete answer I will flag it as the solution. — Sarpo, Mar 10 '20 at 17:46

score 2 · Accepted Answer · answered Mar 11 '20 at 08:36

The second change function does not work.

In this case you are adding an event to the 2nd select (#person_province) that was created during rendering, however, when you change the 1st select, there's this code:

$('#person_province').replaceWith(
    $(html).find('#person_province')
);

this deletes the existing select and all existing events that are assigned to that select.

One option is to use event delegation:

$(document).on("change", "#person_province", function...

the other option is to no use .replaceWith but instead replace the contents (or inner HTML) with the new content, which will leave the select intact along with the event(s) assigned.

Within the 1st select callback, change the .replaceWith to:

$('#person_province').html(
    $(html).find("#person_province").html())
);

Change select options with ajax based on previous select

1 Answers1