如何结合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

几件事情，第一调查$获得（）函数;）

“$儿童” 是一个选项列表，当您使用$ 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>'); 
     } 
    }) 

    }); 

}