jQuery在编辑表单页面时没有加载数据

Question

我得到了一些jQuery代码的帮助，用于创建一个层叠样式的下拉列表。在第一个下拉列表中选择选项，在第二个下拉列表中显示相关数据。

$(function () {
    window.all_options = $("[name='breed'] > option").detach(); // global variable
    $("[name='pet_type']").change(function () {
        var pet_type = $(this).val();
        $("[name='breed']").removeAttr("disabled").append(window.all_options);
        $("select[name='breed'] > option").each(function () {
            var o = $(this);
            if (o.data('pet-type') !== pet_type) {
            o.detach();
            }
        });
    });
});

我遇到的问题是，一旦表单提交，所有数据都插入到数据库中，当我去编辑表单时，它应该在相关字段中拉出所有数据，这是为除第二个下拉框之外的所有其他字段做的。

第一个下拉列表显示了正确的pet_type，它启用了第二个下拉列表，但它只是空的，什么都没有。

代码需要不同吗?还是与其他东西有关?

欢呼

Answer 1

你已经定义了一个onChange事件监听器。change()，但一旦编辑表单被加载，没有实际的onChange事件发生(我猜你的数据是在HTML中预渲染的)。所以你可以通过在jQuery onLoad函数的末尾添加("[name='pet_type']").trigger("change")手动触发它。

$(function () {
    window.all_options = $("[name='breed'] > option").detach(); // global variable
    $("[name='pet_type']").change(function () {
        var pet_type = $(this).val();
        $("[name='breed']").removeAttr("disabled").append(window.all_options);
        $("select[name='breed'] > option").each(function () {
            var o = $(this);
            if (o.data('pet-type') !== pet_type) {
            o.detach();
            }
        });
    });
    $("[name='pet_type']").trigger("change");
});