Question

我有一个带两个面板的模态（手风琴切换），然后我关闭模态并重新打开它。一切仍然存在，例如：数据，面板仍然打开等等。我不希望我的父页面重新加载/刷新，我只想要我的模态。

我尝试了以下内容，但到目前为止还没有运气：

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 multiselect插件），两个面板和页脚上的一个按钮。

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

<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

我所做的是在打开模态之前，我清理输入，所以看看代码：Demo - ＆gt; http://jsfiddle.net/s181uj5j/

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

希望它有所帮助！

关闭后刷新Bootstrap模式

1 个答案: