Изменить параметры выбора с помощью ajax на основе предыдущего выбора

Question

Я пытаюсь обновить три связанных поля Страна -> Провинция -> Выбор города на основе предыдущего выбора. Вторая часть моего javascript не работает

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

Вторая функция изменения не работает. Что я делаю неправильно? Есть ли способ вызвать дважды изменить и ajax функции?

Answer 1

Вторая функция изменения не работает.

В этом случае вы добавляете событие ко 2-му select (#person_province), которое было создано во время рендеринга, однако, при изменении 1-го select появляется следующий код:

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

, при этом удаляются существующие select и все существующие события, которые назначены этому select.

Одна опция использовать делегирование события:

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

другой вариант - не использовать .replaceWith, а вместо этого заменить содержимое (или внутреннее HTML) новым содержимым, которое не изменит select вместе с назначенными событиями.

В рамках 1-го select обратного вызова измените .replaceWith на:

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