select2 和表单更改事件

Posted 2023-05-09

【中文标题】select2 和表单更改事件

【英文标题】：select2 and form change events

【发布时间】：2018-04-13 17:22:24

【问题描述】：

我有一个过滤器表单，我在其中使用 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%'
        )
    

我将如何抑制这个问题

【问题讨论】：

你为什么使用 if (event.isTrigger)

【参考方案1】：

您应该绑定到select2:select 事件而不是change 事件。请参阅documentation on events。