在下拉列表的更改中显示模式表单

时间:2015-04-04 13:59:13

标签: javascript jquery html asp.net twitter-bootstrap

所以我有一个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>

使用带有数据切换和数据目标属性的按钮可以轻松启动模式,如下所示:

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

但是,从下拉列表中选择值时,如何显示此表单?我已经在我的下拉列表选项的OnChange中添加了一个JS函数,但我不知道如何激活模态表单。

提前致谢

1 个答案:

答案 0 :(得分:1)

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

请检查此链接:

Bootstrap Modal doesn't show