如何使用jquery预填充字段

Posted 2023-05-08

【中文标题】如何使用jquery预填充字段

【英文标题】：How to prefill fields using 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 中调用它。

【参考方案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。