select2とフォーム変更イベント

Question

私はajaxでチェーン2のselect2ボックスにデータを入力するフィルターフォームを持っています。

各変更イベントでフォームを送信したいが、問題はselect2の投入トリガがプログラムによって変更され、フォームが送信されて無限の送信が行われるという問題である。

SELECT2のイベントが、それは次のように選択機能を見てチェーン結合

$('#filter-employees').on('change' , function(event) { 
      if (event.isTrigger) 
      { 
       alert ('not a human'); 
      } 
      }) 

私のいる間、私は、次のスニペットと作品はそうでない、SELECT2変更はプログラム的に作成したか取得した場合に追跡してみました

var select2Tree = function() { 

     var $units = $('#units').select2({ 
      placeholder: 'Select Unit' 
     }).prop("disabled", true); 

     var $teams = $('#teams').select2({ 
      placeholder: 'Select Team' 
     }).prop("disabled", true); 

     var $request = $.ajax({ 
      url: '/api/v1/groups', 
      headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')} 
     }); 

     $request.then(function (data) { 

      var options = [{ 
        'text': '', 
        'id': '' 
       }]; 

      var nodes = data.children, unitId = null, unitOptions = {}, tmpObjTeam = {}; 

      for (var key in nodes) { 
       if (nodes.hasOwnProperty(key)) { 
        options.push({ 
         'text': nodes[key].name, 
         'id': nodes[key].id, 
        }); 
       } 
      } 

      var $groups = $('#groups').html('').select2({ 
       data: options, 
       width: '100%', 
       placeholder: 'Select Group' 
      }); 

      $groups.trigger('change'); 

      $groups.on('change', function() { 
       unitId = $(this).val() 
       $teams.html('') 
       unitOptions = getChildrensByKey(nodes, unitId); 
       $units.html('').select2({ 
        data: unitOptions, 
        placeholder: 'Select Unit', 
        width: '100%' 
       }).prop("disabled", false); 

       return unitOptions; 
      }); 

      $units.on('change', function() { 
       var teamsOptions = findNode($(this).val(), nodes[unitId]); 

       var teamsChildrens = teamsOptions.children, tmpObj2 = [{ 
         'text': '', 
         'id': '' 
        }]; 

       for (var key in teamsChildrens) { 
        if (teamsChildrens.hasOwnProperty(key)) { 
         tmpObj2.push({ 
          'text': teamsChildrens[key].name, 
          'id': teamsChildrens[key].id, 
         }); 
        } 
       } 
       $teams.html('').select2({ 
        data: tmpObj2, 
        placeholder: 'Select Team', 
        width: '100%' 
       }).prop("disabled", false); 
      }); 

      function getChildrensByKey(node, key) { 

       var childrens = node[key].children, tmpObj = [{ 
         'text': '', 
         'id': '' 
        }]; 

       for (var key in childrens) { 
        if (childrens.hasOwnProperty(key)) { 
         tmpObj.push({ 
          'text': childrens[key].name, 
          'id': childrens[key].id, 
         }); 
        } 
       } 

       return tmpObj; 
      } 

      function findNode(id, currentNode) { 
       if (id == currentNode.id) { 
        return currentNode; 
       } else { 
        var result; 
        currentNode.children.forEach(function (node) { 
         if (node.id == id) { 
          result = node; 
          return; 
         } 
        }); 
        return (result ? result : "No Node Found"); 
       } 
      } 
     }); 


     $("#leaderDropdown").select2({ 
      width: '100%' 
     }) 
    } 

私はこの問題

Answer 1

を抑制する方法をあなたが代わりにのselect2:selectイベントにバインドする必要がありますイベント。 documentation on eventsを参照してください。