根据之前的 select 将 select 选项更改为 ajax

Question

我正在尝试根据之前的 select selection 更新三个链接的 Country -> Province -> City select 框。我的 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

The second change function does not work.

在这种情况下，您要将事件添加到渲染期间创建的第二个 select (#person_province)，但是，当您更改第一个 select 时，会出现以下代码:

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

这将删除现有 select 以及分配给该 select 的所有现有事件。

一种选择是使用事件委托：

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

另一种选择是不使用 .replaceWith 而是用新内容替换内容（或内部 HTML），这将使 select 与事件一起保持完整(s) 已分配。

在第一个 select 回调中，将 .replaceWith 更改为：

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

根据之前的 select 将 select 选项更改为 ajax

Change select options with ajax based on previous select

ajax

jquery

select

onchange

dropdown