如何使用jquery預填充欄位

嗨，我正在嘗試弄清楚如何使用 ajax 呼叫填充所有欄位，它通過選擇類別成功完成，它加載了所有相關的 sub_categories。

但是sub_sub_category欄位是空的。只有當我選擇sub_category選項時，它才會加載 all 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>

uj5u.com熱心網友回復：

您可能需要考慮以下內容。

$(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 的加載。

如果您需要進一步的幫助，請提供一個最小的、可重現的示例。

標籤：javascript php 查询 拉拉维尔

上一篇：Vuetify在按鍵上搜索

下一篇：如何在js中制作計時器