如何结合jQuery / AJAX函数？

Question

我对jQuery相当陌生，想知道是否有人可以就我如何在下面结合我的代码提出建议。 我的表单具有一组动态的下拉框，其中第二个下拉框根据第一个下拉框的选择显示一组值。

我需要在表单克隆上调用AJAX，以便下拉框的动态功能正常运行。

有任何想法吗？

$(document).ready(function(){   

    var sheepItForm = $('#clone').sheepIt({
        separator: '',
        allowRemoveLast: true,
        allowRemoveCurrent: true,
        allowAdd: true,
        maxFormsCount: 3,
        minFormsCount: 1,
        iniFormsCount: 1
    });

    $(".item").change(function () { 

      var group_id = $(this).val();
      var self = $(this); // Added line

      var $children = $(this).parent().next().children('select.options')

       $.ajax({
            type: "POST", 
            url: "../../db/groups.php?id=" + group_id, 
            dataType: "json",
            success: function(data){    
                $children.empty()
                $children.append('<option value="">Select</option>');           
                $.each(data, function(i, val){    
                   $children.append('<option value="' + val.group_id + '">' + val.name + '</option>');
                });
                $children.focus();
            },
            beforeSend: function(){
                $children.empty();
                $children.append('<option value="">Loading...</option>');
            },
            error: function(){
                $children.attr('disabled', true);
                $children.empty();
                $children.append('<option value="">No Options</option>');
            }
        })  

    }); 

    $('#group_add').live('click', function() { 

        $(".item").change(function () { 

          var group_id = $(this).val();
          var self = $(this); // Added line

          var $children = $(this).parent().next().children('select.options')

           $.ajax({
                type: "POST", 
                url: "../../db/groups.php?id=" + group_id, 
                dataType: "json",
                success: function(data){    
                    $children.empty()
                    $children.append('<option value="">Select</option>');           
                    $.each(data, function(i, val){    
                       $children.append('<option value="' + val.group_id + '">' + val.name + '</option>');
                    });
                    $children.focus();
                },
                beforeSend: function(){
                    $children.empty();
                    $children.append('<option value="">Loading...</option>');
                },
                error: function(){
                    $children.attr('disabled', true);
                    $children.empty();
                    $children.append('<option value="">No Options</option>');
                }
            })  

        }); 

    }

})

Answer 1

几件事，首先研究$ .get（）函数;）

“ $ children”是一个选项列表，当您使用$ children.empty（）时，您将清空每个选项...

这是我想您想要的：

$(document).ready(function(){   

    var sheepItForm = $('#clone').sheepIt({
        separator: '',
        allowRemoveLast: true,
        allowRemoveCurrent: true,
        allowAdd: true,
        maxFormsCount: 3,
        minFormsCount: 1,
        iniFormsCount: 1
    });

    $(".item").change(function () { 
        fill(this);
    }); 

    $('#group_add').live('click', function() { 
        fill($('.item')[0]);
    })

})

function fill(obj) 
{
    var $this = $(obj); // Added line
    var group_id = $this.val();


    var $next = $this.parent().next();

    $.ajax({
        type: "POST", 
        url: "../../db/groups.php?id=" + group_id, 
        dataType: "json",
        success: function(data){    
            $next.empty()
            $next.append('<option value="">Select</option>');           
            $.each(data, function(i, val){    
               $next.append('<option value="' + val.group_id + '">' + val.name + '</option>');
            });
            $next.focus();
        },
        beforeSend: function(){
            $next.empty();
            $next.append('<option value="">Loading...</option>');
        },
        error: function(){
            $next.attr('disabled', true);
            $next.empty();
            $next.append('<option value="">No Options</option>');
        }
    })  

    }); 

}