javascript - 关闭后刷新 Bootstrap 模态

Question

我有一个带有两个面板( Accordion 切换)的模式，在关闭模式并重新打开它之后。一切都还在那里，例如:数据、面板仍然打开等。我不希望我的父页面重新加载/刷新，我只想我的模式。

我已经尝试过以下方法，但到目前为止没有运气:

document.location.reload(); //this refreshes parent page...don't want

var $collapse = $this.closest('.collapse-group').find('.collapse');
$collapse.collapse('toggle'); //does nothing

$('#elementId').empty(); //completely destroys my modal, don't want

$('#elementId').on('hidden.bs.modal', function () {
$('#elementId').removeData('bs.modal');}); //does nothing

data-cache="false" //put in HTML, does nothing

***更新**** 根据要求，这是我的 HTML 代码。它有很多下拉菜单( Bootstrap 多选插件)、两个面板和页脚上的一个按钮。

我希望在模式关闭/打开时折叠我的面板并清除我的下拉菜单。换句话说，恢复到原来的状态。

<div class="modal fade in" aria-hidden="false" id="setEventConditionsModal" data-backdrop="static">
    <div class="modal-backdrop fade in" style="height: 100%"></div>
    <div class="modal-dialog" style="left: 0!important; width: 65%">
        <div class="modal-content" style="width: 100%">
            <div class="modal-header">
                <button type="reset" class="close" data-toggle="modal" data-dismiss="modal" id="closeModal">x</button>
                <div>
                    <div>
                        <h4 class="modal-title">Events</h4>
                    </div>
                </div>
            </div>
            <div class="panel-body">
                <div class="panel panel-inverse">
                    <div class="panel-heading">
                        <h3 class="panel-title text-left"> <a class="accordion-toggle accordion-toggle-styled collapsed" id="test" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> <i class="fa fa-plus-circle pull-right"></i> Selected Events </a> </h3>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse">
                        <div class="panel-body text-left" id="demo"></div>
                    </div>
                </div>
                <div class="panel panel-inverse">
                    <div class="panel-heading">
                        <h3 class="panel-title text-left"> <a class="accordion-toggle accordion-toggle-styled collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> <i class="fa fa-plus-circle pull-right"></i> Edit Conditions </a> </h3>
                    </div>
                    <div id="collapseTwo" class="panel-collapse collapse" style="margin-bottom: -25px">
                        <div class="panel-body text-left">
                            <div class="col-md-4">
                                <label>Creditor Name Match</label>
                                <select id="creditorName-dropdown"></select>
                                <p></p>
                                <label>Client</label>
                                <select id="client-dropdown" multiple="multiple"></select>
                                <p></p>
                                <label style="margin-top: 7px">Accuracy</label>
                                <select id="accuracy-dropdown"></select>
                            </div>
                            <div class="col-md-4">
                                <label>Chapter</label>
                                <select id="chapter-dropdown" multiple="multiple"></select>
                                <p></p>
                                <label>Division</label>
                                <select id="division-dropdown" multiple="multiple"></select>
                                <p></p>
                                <label style="margin-top: 2.5%">Workflow</label>
                                <select id="workflow-dropdown"></select>
                            </div>
                            <div class="col-md-4">
                                <label>Jurisdiction</label>
                                <select id="jurisdiction-dropdown" multiple="multiple"></select>
                                <p></p>
                                <label>Unit</label>
                                <select id="unit-dropdown" multiple="multiple"></select>
                            </div>
                        </div>                            
                    </div>
                </div>
            </div>
            <div class="modal-footer">
              <button type="submit" id="insertButton" class="btn btn-success"><i class="fa fa-floppy-o"></i> Save</button>
            </div>
        </div>
    </div>
</div>

谁能帮帮我吗？

提前谢谢您!

Answer 1

我所做的是在打开模式之前，我清理输入，所以看一下代码:演示 -> http://jsfiddle.net/s181uj5j/

$('#document').ready(function(){
    $('#btn-show-modal').on('click', function(){
        $('.modal-input').val('');
    });
});

希望对你有帮助!