Question

我有一个带选择的模态。模态加载了ajax。我希望选择使用它，所以在我的成功活动中我有这个：

$.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会按预期工作，但我真的想拥有所选的界面。

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

选择的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-Drop和chosen-container-active类来手动删除chosen-with-drop：

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

Jquery选择不关闭选择

1 个答案: