如何使用jquery预填充字段答案

【问题标题】：How to prefill fields using jquery如何使用jquery预填充字段
【发布时间】：2021-12-10 10:09:46
【问题描述】：

您好，我正在尝试弄清楚如何使用 ajax 调用填充所有字段，它通过选择类别成功完成，它会加载所有相关的子类别。

但sub_sub_category 字段为空。只有当我选择sub_category 选项时，它才会加载所有sub_sub_categories，但我希望在更改类别后全部预填充。我不介意这样离开，但问题是如果我只有一个sub_category，我无法选择任何sub_sub_category，即使他们有任何我试图转换为函数并调用它们但没有成功。

代码如下：

<script>
    $(document).ready(function() {
        get_sub_sub_category();
        $('select[name="category_id"]').on('change', function() {
            var category_id = $(this).val();
            if(category_id) {
                $.ajax({
                    url: "{{ url('/category/sub-category/') }}/"+category_id,
                    type: "GET",
                    dataType: "json",
                    success: function(data) {
                        $('select[name="sub_sub_category_id"]').html('');
                        var d = $('select[name="sub_category_id"]').empty();

                        $.each(data, function(key, value) {
                            $('select[name="sub_category_id"]').append('<option value="'+ value.id +'">' + value.sub_category_name + '</option>');
                        });
                        get_sub_sub_category();
                    },
                })
            } else {
                alert('danger');
            }
        });


        function get_sub_sub_category() {
            $('select[name="sub_category_id"]').on('load change', function () {
                var sub_category_id = $(this).val();
                if (sub_category_id) {
                    $.ajax({
                        url: "{{ url('/category/sub-sub-category/') }}/"+sub_category_id,
                        type: "GET",
                        dataType: "json",
                        success: function (data) {
                            var d = $('select[name="sub_sub_category_id"]').empty();
                            $.each(data, function (key, value) {
                                $('select[name="sub_sub_category_id"]').append('<option value="' + value.id + '">' + value.sub_sub_category_name + '</option>');
                            });
                        },
                    })
                } else {
                    alert('danger');
                }
            });
        }
    });

</script>

【问题讨论】：

欢迎来到 Stack Overflow。我不明白这里使用的逻辑。在您的函数get_sub_sub_category() 中，您为特定事件load 和change 定义回调。在触发这些事件之前，不会执行回调。我想我理解你为什么要预先调用get_sub_sub_category()，但不清楚你为什么在 AJAX 中调用它。

标签： javascript php jquery laravel

【解决方案1】：

您可能需要考虑以下事项。

$(function() {
  $('select[name="category_id"]').on('change', function() {
    var category_id = $(this).val();
    if (category_id) {
      $.ajax({
        url: "{{ url('/category/sub-category/') }}/" + category_id,
        type: "GET",
        dataType: "json",
        success: function(data) {
          $('select[name="sub_sub_category_id"]').html('');
          var d = $('select[name="sub_category_id"]').empty();

          $.each(data, function(key, value) {
            $('select[name="sub_category_id"]').append('<option value="' + value.id + '">' + value.sub_category_name + '</option>');
          });
          $('select[name="sub_category_id"]').trigger("change");
        },
      })
    } else {
      alert('danger');
    }
  });

  $('select[name="sub_category_id"]').on('change', function() {
    var sub_category_id = $(this).val();
    if (sub_category_id) {
      $.ajax({
        url: "{{ url('/category/sub-sub-category/') }}/" + sub_category_id,
        type: "GET",
        dataType: "json",
        success: function(data) {
          var d = $('select[name="sub_sub_category_id"]').empty();
          $.each(data, function(key, value) {
            $('select[name="sub_sub_category_id"]').append('<option value="' + value.id + '">' + value.sub_sub_category_name + '</option>');
          });
        },
      })
    } else {
      alert('danger');
    }
  });
});

这定义了两者的回调。对于类别，当它改变时，它会在子类别上触发change事件。这反过来将级联下一个 Select 的加载。

如果您需要进一步的帮助，请提供Minimal, Reproducible Example。

【讨论】：