select2 和表单更改事件

Question

我有一个过滤器表单，我在其中使用 ajax 填充链接的 select2 框。

我想在每个更改事件上提交我的表单，但问题是 select2 populate 以编程方式触发更改，并且表单正在提交，这会导致无限提交。

我试图跟踪 select2 更改是否以编程方式创建，以下 sn-p 不起作用，而 select2 上的事件是绑定

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

我的链式选择函数如下所示

 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 事件而不是change 事件。请参阅documentation on events。