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

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

我的偏见

我的布局页面

---

我建议将JS拉出到与其他处理程序类似的处理程序中，并执行以下操作：

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

---

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

这只是提交我的表单的另一种方式。一旦提交页面，我将如何加载一个模式？一旦提交，您可以触发一个模式来显示，但请记住，当前页面从客户端角度被破坏，当您转到新页面时，您必须找到一种方法来触发它，就像通过模型向视图传递一个标志一样，最终调用JavaScript modalshow；

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

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