如何結合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>'); 
     } 
    }) 

    }); 

}