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

Question

我有一个包含下拉列表的模式，在选择/onchange 事件时，我希望新视图显示在模式中。我已经使用this solution 来实现多个模态叠加，并尝试将 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>

Answer 1

我建议将 JS 拉出到其他处理程序中，然后执行以下操作：

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

请注意，这会提交表单，然后发回操​​作。然后该操作将返回某种视图以显示结果。您指出了另一个模式，但同步回发会让您远离当前视图。