javascript - 在下拉列表的更改时显示模式表单

Question

所以我有一个 ASP .NET MVC 应用程序，用户应该能够在其中向页面添加内容。该内容可以是位置、照片…… 我的 View 中有一个下拉列表，其中包含所有不同的内容选项。选择某个选项后，页面应显示一个模式表单，他们可以在其中根据所选内容的类型输入详细信息。

我的模态表单的构造如下:

<div class="modal fade" id="locationModal" tabindex="-1" role="dialog" aria-labelledby="Login" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">Map</h4>
            </div>

            <div class="modal-body">
                <!-- The form is placed inside the body of modal -->
                <form id="locationForm" method="post" class="form-horizontal">
                    <div class="form-group">
                        <label class="col-xs-3 control-label">Address</label>
                        <div class="col-xs-5">
                            <input type="text" class="form-control" name="address" />
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-xs-5 col-xs-offset-3">
                            <button type="submit" class="btn btn-primary">Add location</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

使用带有 data-toggle 和 data-target 属性的按钮可以轻松启动模式，如下所示:

<p class="text-center">
    <button id="addLocation" class="btn btn-default" data-toggle="modal" data-target="#locationModal"></button>
</p>

但是，当从下拉列表中选择值时，如何实现显示此表单呢？我已将 JS 函数添加到下拉列表选择的 OnChange 中，但我不知道如何启动模式表单。

提前致谢

Answer 1

您可以在下拉列表的更改事件上使用 JavaScript 加载模式。

只需检查此链接:

Bootstrap Modal doesn't show