select2 및 양식 변경 이벤트

Question

아약스로 연결된 선택 상자 2 개를 채우는 필터 양식이 있습니다.

각 변경 이벤트에 양식을 제출하고 싶지만 select2 populate 트리거가 프로그램 방식으로 변경되고 양식이 무제한 제출 결과로 제출되는 문제가 있습니다. 선택 2의 이벤트가 바인딩

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

내 체인 선택 기능의 Look하면서 다음과 같이

나는, 선택 2 변경이 프로그래밍 방식으로 만들거나하지, 다음 코드와 함께 작동하지 않는지고있는 경우 추적하기 위해 시도

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을 참조하십시오.