We_Relese/App/Relese/Views/Shared/Camp/_SelectCampV2.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 {
        overflow: hidden;
        --c: #7fbaff;
        --c2: #094B88;
    }

    .box {
        width: 100%;
        position: relative;
        font-family: 'Source Han Sans';
        background: none;
    }


        .box .body {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            height: calc(100vh - 150px);
        }

    .form {
        width: 400px;
        margin-top: -15%;
        font-size: 14px;
    }

    .input-group {
        margin-bottom: 15px;
    }

        .input-group .input-group-addon {
            width: 45px;
            height: 40px;
            background: var(--c);
            padding: 8px 10px 12px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 5px 0 0 5px;
        }

            .input-group .input-group-addon img {
                width: 18px;
                height: 18px;
            }

        .input-group select {
            width: calc(100% - 45px)
        }

    .form .select2-container--default .select2-selection--single {
        border: 1px solid var(--c);
        border-radius: 0px;
        background: #f5f5f5;
        height: 40px;
        outline: none;
        border-radius: 0 5px 5px 0;
    }

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

    .select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[aria-selected]:hover {
        background-color: var(--c2);
        color: #eee;
        outline: none;
    }

    .select2-container--default .select2-results__option[aria-selected=true] {
        background-color: var(--c2);
        color: #fff;
    }

    .select2-search {
        display: none;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        background-color: var(--c);
        height: 40px;
        border-radius: 0 5px 5px 0;
    }

        .select2-container--default .select2-selection--single .select2-selection__arrow b {
            border-color: #fff transparent transparent transparent;
        }

    .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
        border-color: transparent transparent #fff transparent;
    }

    .btn-box {
        text-align: center;
    }

        .btn-box .btn {
            color: #fff;
            width: 150px;
            font-size: 18px !important;
            background: var(--c);
            border-radius: 5px;
        }

            .btn-box .btn:hover {
                background-image: linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.1))
            }
</style>
@Html.Partial("Layout/V2/_Bg", true)
<div class="body">
    <div class="box no-select" style="">
        <div id="bg_title">
            <span class="title">选择演练培训营</span>
        </div>
        <div class="body">
            <form class="form">
                <div class="input-group">
                    <span class="input-group-addon" for="camp">
                        <img src="~/Content/Image/Stu/camp.png" />
                    </span>
                    <select id="camp" class="form-control" style="">
                        @(Html.Raw(camps))
                    </select>
                </div>
                @if (hasGroup)
                {
                    <div class="input-group">
                        <span class="input-group-addon" for="camp-group">
                            <img src="~/Content/Image/Stu/group.png" />
                        </span>
                        <select id="camp-group" class="form-control" style="">
                            <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-->