Javascript 如何组合jQuery/AJAX功能？

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

        }); 

    }

})

$（文档）.ready（函数（）{
var sheepItForm=$（“#克隆”）。sheepIt({
分隔符：“”，
allowRemoveLast:对，
allowRemoveCurrent:正确，
阿洛瓦德：是的，
maxFormsCount:3，
minFormsCount:1，
iniFormsCount:1
});
$（“.item”）.change（函数（）{
var group_id=$（this.val（）；
var self=$（this）；//添加了行
var$children=$（this.parent（）.next（）.children（'select.options'））
$.ajax({
类型：“POST”，
url:“../db/groups.php？id=“+group_id，
数据类型：“json”，
成功：函数（数据）{
$children.empty（）
$children.append（'Select'）；
$.each（数据，函数（i，val）{
$children.append（“”+val.name+“”）；
});
$children.focus（）；
},
beforeSend:function（）{
$children.empty（）；
$children.append（'Loading…'）；
},
错误：函数（）{
$children.attr（'disabled'，true）；
$children.empty（）；
$children.append（'No Options'）；
}
})  
}); 
$（'#group_add'）.live（'click'，function（）{
$（“.item”）.change（函数（）{
var group_id=$（this.val（）；
var self=$（this）；//添加了行
var$children=$（this.parent（）.next（）.children（'select.options'））
$.ajax({
类型：“POST”，
url:“../db/groups.php？id=“+group_id，
数据类型：“json”，
成功：函数（数据）{
$children.empty（）
$children.append（'Select'）；
$.each（数据，函数（i，val）{
$children.append（“”+val.name+“”）；
});
$children.focus（）；
},
beforeSend:function（）{
$children.empty（）；
$children.append（'Loading…'）；
},
错误：函数（）{
$children.attr（'disabled'，true）；
$children.empty（）；
$children.append（'No Options'）；
}
})  
}); 
}
})

有几件事，首先研究$.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>');
        }
    })  

    }); 

}

$（文档）.ready（函数（）{
var sheepItForm=$（“#克隆”）。sheepIt({
分隔符：“”，
allowRemoveLast:对，
allowRemoveCurrent:正确，
阿洛瓦德：是的，
maxFormsCount:3，
minFormsCount:1，
iniFormsCount:1
});
$（“.item”）.change（函数（）{
填补（这个）；
}); 
$（'#group_add'）.live（'click'，function（）{
填写（$（'.item'）[0]）；
})
})
功能填充（obj）
{
var$this=$（obj）；//添加了行
var group_id=$this.val（）；
var$next=$this.parent（）.next（）；
$.ajax({
类型：“POST”，
url:“../db/groups.php？id=“+group_id，
数据类型：“json”，
成功：函数（数据）{
$next.empty（）
$next.append（'Select'）；
$.each（数据，函数（i，val）{
$next.append（“”+val.name+“”）；
});
$next.focus（）；
},
beforeSend:function（）{
$next.empty（）；
$next.append（'Loading…'）；
},
错误：函数（）{
$next.attr（'disabled'，true）；
$next.empty（）；
$next.append（'No Options'）；
}
})  
}); 
}

嗨，罗斯兰，我要试试这个！研究GET函数是什么意思？$.GET和$.post只是调用$.ajax的“助手”函数。如果愿意，您只需要编写更少的代码。