jQuery/AJAX関数を結合するには？

Question

私はjQueryをかなり使い慣れていて、誰かが私のコードをどのように組み合わせるかについての提案を提供できるかどうか疑問に思っていました。私のフォームには、最初のドロップダウンボックスからの選択に基づいて2番目のドロップダウンボックスに値のセットが表示される、ドロップダウンボックスの動的セットがあります。

フォームクローンで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.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>'); 
     } 
    }) 

    }); 

}