在下拉列表更改时显示模态表单

Question

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

我的模态表单是这样构造的：

<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>

但是，如何在从下拉列表中选择一个值时显示此表单？我在下拉列表选择的 OnChange 中添加了一个 JS 函数，但我不知道如何启动模态表单。

提前致谢

Answer 1

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

只需检查此链接：

Bootstrap Modal doesn't show