Jquery 选择不关闭选择

Question

我有一个带有 select 的模态框。模态加载 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%'
    });
});

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

我尝试添加一个事件以在 selected 时手动关闭它，但它没有做任何事情：

$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() 在事件中显示正确。如果我删除选择的，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，这对我来说不是问题。

Answer 1

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

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

Jquery 选择不关闭选择

Jquery chosen not closing on selection

javascript

jquery-chosen