使用 bootstrap + jQuery 重置模态数据

Posted

技术标签:

【中文标题】使用 bootstrap + jQuery 重置模态数据【英文标题】:Reset modal data with bootstrap + jQuery 【发布时间】:2015-03-27 15:58:38 【问题描述】:

我有一个 MVC 5 c# 项目,使用 Bootstrap bootstrap-transition.js v2.3.1bootstrap-modal.js v2.2.0、jQuery jQuery javascript Library v2.1.3,最后是 select2 Version: 3.5.2

在这个项目中,我有一个包含以下信息的模态:

<div class="modal fade" id="@Model.modalId" tabindex="-1" role="dialog" aria-labelledby="@Model.modalId" aria-hidden="true">
    <div class="modal-dialog" style="overflow-y: auto; max-height: 80vh;">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">@Model.modalTitle</h4>
            </div>
            <div class="modal-body" data-val="@Model.packageId">
                <form class="form-horizontal">
                    <div class="control-group">
                        <label class="control-label">Package Name: </label>
                        <div class="controls">
                            <input type="text" class="form-control" id="package-name" placeholder="@Model.pkgNamePlaceHolder" value="@Model.pkgNameValue">
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">Select the materials:</label>
                        <div class="controls">
                            <input class="select2s" data-edit-values="@Model.materialsString" data-o2f-placeholder="Select Materials..." data-o2f-url="@Url.Action("MaterialsMultiple", "Home")" data-val="false" id="MaterialId" name="MaterialId" multiple="multiple" type="text" />
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="@Model.saveButtonId" data-url="@Model.saveButtonUrl">@Model.saveButtonText</button>
            </div>
        </div>
    </div>
</div>

在 cshtml 中,我使用以下两行来渲染模型:

 ModalPackageInfo createModal = new ModalPackageInfo("createPkgModal", Url.Action("CreatePackage", "Package"), true);
    Html.RenderPartial("_ModalPackagePopup", createModal);

当我第一次打开模态框时,它是空的,这很好。但是,如果我更改其中一个字段,将其关闭并重新打开,旧信息仍然存在。我想避免这种行为,我想在模式关闭时重置它的信息。

为了实现这一点,我尝试了本次讨论中的所有解决方案,但都没有成功

how to destroy bootstrap modal window completely?

将包名字段更改为空很容易,我只需执行$(#createPkgModal input#package-name).val('') 即可,但是使用 select2 的另一个字段不受此更改的影响。

如何解决这个问题并在每次关闭时重置模态数据?

【问题讨论】:

***.com/questions/15205262/… 哇...比预期的要容易 xD 如果您将其发布为答案,我会接受它:D 不敢相信我在错误的树中搜索:P 【参考方案1】:

可能有很多方法可以重置模态数据,但是,我使用的方法是使用 jQuery 并使用 $(#fieldId).val(''); 手动重置每个字段。

在 select2 的情况下,我不得不为此使用 selecte 的变体:$('#fieldId').select2('data', null);

【讨论】:

以上是关于使用 bootstrap + jQuery 重置模态数据的主要内容,如果未能解决你的问题,请参考以下文章

如何在vuejs中使用bootstrap

Bootstrap Selectpicker 不会使用内置函数重置

ui-bootstrap 分页在初始化时重置当前页面

如何在 Bootstrap 4 模态表单中重置单选按钮和复选框? [复制]

如何防止 Bootstrap-Vue 分页自动重置

分页将值重置为 1 bootstrap-vue