javascript - Jquery 选择不关闭选择

Question

我有一个带有选择的模式。模态是用ajax加载的。我希望它的选择使用 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")
});

我还尝试添加其他选择中的选项，但没有效果。

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

控制台中任何时候都没有错误，并且事件中的 console.log() 显示正确。如果我删除所选的内容，则选择会按预期工作，但我真的希望拥有所选的界面。

我觉得我可能遗漏了一些明显的东西。

选择的 html(带有 Twig )

<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，这对我来说不是问题。

Answer 1

您可以通过删除 chosen-container-active 和 chosen-with-drop 类自动删除 Chosen-Drop 来手动删除 Chosen-Drop当您打开下拉菜单时由选择生成:

var chosenContainer = $('.chosen-container');
chosenContainer.removeClass('chosen-container-active').removeClass('chosen-with-drop');