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>');
        }
    })  

    }); 

}

如何结合jQuery / AJAX功能？

1 个答案: