单击“添加”按钮后，select2 下拉列表未关闭

Question

我在 select2 下拉列表中添加了一个“添加新人”按钮

select2 代码如下所示：

  $('#subFundSelection').select2({
            width: '100%',
            placeholder: 'Select a sub-fund',
            ajax: {
                url: '/FundInfo/SearchLegalEntities',
                type: 'GET',
                dataType: 'json',
                delay: 250,
                allowClear: true,
                data: function (params) {
                    return {
                        searchTerm: params.term
                    };
                },
                processResults: function (data) {
                    return {
                        results: $.map(data.legalEntities, function (obj) {
                            return { id: obj.Id, text: obj.Text };
                        })
                    };
                },
            },
            minimumInputLength: 2
        }).on('select2:open', () => {
            $(".select2-results:not(:has(button))").append('<button id="newPersonButton" style="width: 100%" type="button" class="btn btn-primary" onClick="CreateLegalEntity()">+ Add a new person</button>')
        })

下拉列表中添加了一个按钮（我无法添加图片抱歉）

当我点击这个“添加新人”按钮时，我会打开一个模式。

function CreateLegalEntity() {
  
   $('#CreateLegalEntityModal').modal('show');
}

一切正常，而不是下拉列表在单击后没有关闭并且它出现在模式的顶部，直到我单击屏幕中的其他位置。

很抱歉没有附上截图，但网站不允许我。

我试过了：

$(this).blur() 
$(".select2").trigger('blur') 
$(".select2").trigger('change')

Answer 1

来自Methods | Select2这里的 SELECT2 文档

close 方法会导致下拉菜单关闭，隐藏可选择的选项：

$('#subFundSelection').select2('close');

应该做你想做的事

编辑

您应该从最初创建元素 .select2({params}); 的同一标识符调用 .select2('close') 方法

例如：$('#div1').select2() 所以应该是$('#div1').select2('close')