选择的Jquery未在选择时关闭

我有一个带select的modal。model是用ajax加载的。 我希望上面的select使用selected,因此在我的成功事件中,我有以下内容:

$.ajax({
    url: $params.testPlanImportPath,
    method: 'POST'
}).success(function (response) {
    $modal.html(response).modal('show')
    $modal.find('#test_plan_form_project').chosen({
        width: '100%'
    });
});

到目前为止,该部分运行良好,唯一的问题是我希望在单击某个项目时关闭选择。我相信这应该是默认的行为,但出于某种原因,它对我不起作用。我在我的网站上选择了其他的,没有问题。

我尝试添加一个事件以在选中时手动关闭它,但它没有执行任何操作:

$modal.find('#test_plan_form_project').chosen({width:'100%'}).on('change', function(){
     //the code here was executed but it didn't close anyway
     console.log('close');
     $modal.find('#test_plan_form_project').trigger("chosen:close")
});

我还尝试添加我在其他chosens中的选项,但没有效果。

$modal.find('#test_plan_form_project').chosen({
    width: '100%',
    allow_single_deselect: true,
    search_contains: true,
    disable_search_threshold: 10
});

控制台中的任何一点都没有错误 console.log() 在事件中正确显示。如果我删除了select,select会按预期工作,但我真的希望拥有所选的界面。

我觉得我可能错过了一些显而易见的东西。

选择的html(带细枝)

<div class="row">
    <div class="col-sm-12 p-0">
        <label class="control-label required" for="test_plan_form_project">Projet</label>
        <select class="form-control" name="test_plan_form_project" id="test_plan_form_project">
            {% for project in projects %}
                <option value="{{project.id}}">{{project.name}}</option>
            {% endfor %}
        </select>
    </div>
</div>

我知道有一个非常相似的问题: JQuery chosen not closing on select

我已经看了这个问题,但唯一的答案没有帮助,在这种情况下,问题原来是一个失踪。css,这不是我的问题。