App_V2.3/SourceCode/WeApp.Web/Views/Shared/Camp/_SelectCamp2.cshtml

@using IwbZero.ToolCommon.StringModel
@using WeApp.Helpers
@model WeApp.Views.Shared.Camp.SelectCampModel
@{
    string url = Model.PageUrl.Ew("/"), camps = Model.CampSelect,title = Model.PageTitle;
    bool hasGroup = Model.HasGroup;
}
<!-- TABLE  SELECTCAMP  START-->
    <style>
        body {
            --c: #fff;
            --bc: #eee;
        }

        .content-wrapper {
            height: calc(100vh - 110px);
            padding: 0 !important;
            overflow: hidden;
        }

        .body {
            width: 100%;
            height: 100vh;
            background-image: linear-gradient(45deg,#005f61,#007f61);
            /*background-image: url('../../../Content/Image/bg_blue.png');*/
            /*background-image: url('../../../Content/Image/Stu/bg-lg-1.png');
        background-size: 100%;*/
        }

        .select-page {
            width: 100%;
            min-height: calc(100vh - 420px);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .select-box {
            margin-top: 150px;
            margin-left: -10px;
            width: 400px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

            .select-box .title {
                color: var(--c);
                font-size: 20px;
                font-weight: 600;
                text-align: center;
                margin-bottom: 15px;
            }

            .select-box .select2-container--default .select2-selection--single {
                border: 1px solid var(--bc);
                border-radius: 20px;
                background: rgba(0,0,0,.1);
                height: 38px;
                outline: none;
            }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            color: var(--c);
        }

        .select-box .select2-container--default .select2-selection--single .select2-selection__arrow {
            top: 6px;
            right: 5px;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow b {
            border-color: var(--bc) transparent transparent transparent;
        }

        .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
            border-color: transparent transparent var(--bc) transparent;
        }

        .select2-container--open .select2-dropdown {
            left: 0;
            background: var(--c);
            background: rgba(0,0,0,.5);
            border-color: var(--bc);
            padding: 5px 0 15px;
            border-radius: 0 0 20px 20px;
        }

        .select2-results__option[aria-selected] {
            color: #ddd;
        }

        .select2-container--default .select2-results__option[aria-selected=true] {
            background-color: rgba(0,0,0,.1);
            color: #fff;
        }

        .select2-container--default .select2-results__option--highlighted[aria-selected] {
            background-color: rgba(0,0,0,.1);
            /*color: var(--c);*/
            font-weight: 600;
        }

            .select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[aria-selected]:hover {
                background-color: rgba(0,0,0,.2);
                color: #fff;
            }

        .select2-search--dropdown {
            display: none;
        }

        .select-box .btn-box {
            width: 100%;
            text-align: center;
        }

        .select-box .btn {
            color: var(--c);
            border: 1px solid var(--bc);
            border-radius: 20px;
            min-width: 100px;
            background: rgba(0,0,0,.1);
            margin: 10px auto;
        }

            .select-box .btn:hover {
                font-weight: 600;
                background: rgba(0,0,0,.2);
            }
    </style>
<div class="body">
    <div class="select-page">
        <div class="select-box">
            <div class="title">选择演练培训营</div>
            <form>
                <div class="form-group">
                    <select id="camp" class="form-control" style="width: 100%">
                        @(Html.Raw(camps))
                    </select>
                </div>
                @if (hasGroup)
                {
                    <div class="form-group">
                        <select id="camp-group" class="form-control" style="width: 100%">
                            <option value="">请选择培训营分组</option>
                        </select>
                    </div>
                }
                <div class="btn-box">
                    <button class="btn" type="button" onclick="Go()">确定</button>
                </div>
            </form>
        </div>
    </div>
</div>

@using (Html.BeginScripts())
{
<script>
    function Go() {
        var no = $("#camp").val();
        if (no) {
            @if (hasGroup)
            {
                <text>
            var groupNo = $("#camp-group").val();
            if (groupNo) {
                window.location.href = '@(url)' + groupNo ;
            } else {
                abp.message.warn("请选择一个分组！");
            }
                </text>
            }
            else
            {
                <text>
                    window.location.href = '@(url)' + no;
                </text>
            }

        } else {
            abp.message.warn("请选择一个培训营！");
        }
    }

    $(function () {
        //document.title = '@(title)' + document.title;
        $("#camp").select2();
        @if (hasGroup)
        {
            <text>
        $("#camp-group").select2();
        var campNo = "";
        $("#camp").on('change',function() {
            var no = $("#camp").val();
            if (no && campNo != no) {
                campNo = no;
                $.iwbAjax4({
                    url: abp.appUrl + 'Query/GetCampGroupSelectStr?no='+no,
                    success: function(res) {
                        $("#camp-group").html(res).select2();
                    }
                });
            }
        });
            </text>
        }
    });
</script>
}
<!-- TABLE  SELECTCAMP  END-->