在下拉列表选择中显示模态

Show modal on drop down list selection

本文关键字:显示 模态 选择 下拉列表      更新时间:2024-06-04

我有一个包含下拉列表的模式,在选择/onchange事件时,我希望新视图以模式显示。我已经使用这个解决方案来实现多模式覆盖,并尝试将javascript从onclick更改为on change,但没有成功

我的部分视图

@using (Html.BeginForm("GameAssignerTable", "Admin", FormMethod.Post, new {role = "form"}))
{
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span></button>
        <h3 class="modal-title">Select Investigator Group</h3>
    </div>
    <div class="modal-body">
        @Html.DropDownListFor(m => m.SelectedGroupUserId, Model.GroupList, "Select Investigator Group", new { @class = "form-control modal-link3", onchange = "this.form.submit();" })
    </div>
}

我的布局页面

  <div class="container">
    <div class="row">
        <div id="modal-container3" class="modal fade" tabindex="-1" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content col-sm-8 col-lg-offset-2">
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
        $(document).on('show.bs.modal', '.modal', function() {
            var zIndex = 1040 + (10 * $('.modal:visible').length);
            $(this).css('z-index', zIndex);
            setTimeout(function() {
                $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
            }, 0);
        });
        // Initialize popover
        $(function() {
            $('[data-toggle="popover"]').popover({ html: true });
        });
        // Used for modals
        $(function() {
            // Initialize modal dialog
            // attach modal-container bootstrap attributes to links with .modal-link class.
            // when a link is clicked with these attributes, bootstrap will display the href content in a modal dialog.
            $('body').on('change', '.modal-link3', function (e) {
                e.preventDefault();
                $(this).attr('data-target', '#modal-container3');
                $(this).attr('data-toggle', 'modal');
            });
            // Attach listener to .modal-close-btn's so that when the button is pressed the modal dialog disappears
            $('body').on('click', '.modal-close-btn', function() {
                $('#modal-container').modal('hide');
            });
            //clear modal cache, so that new content can be loaded
            $('#modal-container3').on('hidden.bs.modal', function() {
                $(this).removeData('bs.modal');
            });
            $('#CancelModal').on('click', function() {
                return false;
            });
        });
    </script>

我建议将JS拉出到像其他处理程序一样的处理程序中,并执行以下操作:

$("#@Html.IdFor(m => m.SelectedGroupUserId)").on("change", function(e) { 
    $(this).closest("form").trigger("submit");
});

请注意,这会提交表单,并返回到操作。然后,该操作将返回某种视图来显示结果。您指示了另一个模态,但同步回发会使您脱离当前视图。