2nd dropdown not displaying after selecting the value from 2nd dropdown in ASP.NET MVC

See more:

ASP.NET

Javascript

MVC

jQuery

i am using cascading dropdownlist in asp.net mvc. when value is selected from first dropdown, the list is shown in 2nd dropdown but when i select the value from 2nd dropdown it shows in the dropdown but after clicking the submit button it disappears showing "Select from List". Please can someone help me to overcome this error.... the code is given below...

View.....

<div class="row form-group">
        <div class="col-md-6">
            @Html.LabelFor(model => model.Religion_Id, new { @class = "control-label" })
            <div class="input-group">
                <span class="input-group-addon" style="background:white">
                    <i class="fa fa-cloud" style="color:#179CDC;"></i>
                </span>
                @Html.DropDownListFor(model => model.Religion_Id, Model.Religion, "Select From List", new { @class = "form-control select2me", @id = "ddlReligion" })
            </div>
            @Html.ValidationMessageFor(model => model.Religion_Id, string.Empty, new { @class = "small text-danger text-uppercase" })
        </div>
        <div class="col-md-6">
            @Html.LabelFor(model => model.Sect_Id, new { @class = "control-label" })
            <div class="input-group">
                <span class="input-group-addon" style="background:white">
                    <i class="fa fa-cloud" style="color:#179CDC;"></i>
                </span>
                <div id="Sects">
                    @Html.DropDownListFor(model => model.Sect_Id, new List<SelectListItem>(), "Select Form List", new { @class = "form-control select2me", @id = "ddlSect" })
                </div>
            </div>
            @Html.ValidationMessageFor(model => model.Sect_Id, string.Empty, new { @class = "small text-danger text-uppercase" })
        </div>
</div>

<script>

$(document).ready(function () {
    loadSect();
});

var loadSect = function (flag) {
    if ("undefined" == typeof (flag)) {
        flag = true;
    }
    $.ajax({
        type: "post",
        url: '@Url.Action("GetSects", "MyProfile", new { area = "Candidate" })',
        data: { religionId: $('#ddlReligion').val() },
        datatype: "json",
        traditional: true,
        success: function (data) {
            var district = "<select id='ddlSect' class='form-control text-uppercase select2me' name='Sect_Id'>";
            district = district + '<option value="">Select From List</option>';
            for (var i = 0; i < data.length; i++) {
                district = district + '<option value=' + data[i].Value + '>' + data[i].Text + '</option>';
            }
            district = district + '</select>';
            $('#Sects').html(district);

            if (flag) {
                setOption($('#Sects select')[0], $('#HSPEC_ID').val())
            }


            if (jQuery().select2) {
                $('#Sects .select2me').select2({
                    placeholder: "Select an option",
                    allowClear: true
                });
            }
        }
    });
};


$('#ddlReligion').change(function () {
    loadSect(false);
});

function setOption(selectElement, value) {
    var options = selectElement.options;
    for (var i = 0, optionsLength = options.length; i < optionsLength; i++) {
        if (options[i].value == value) {
            selectElement.selectedIndex = i;
            return true;
        }
    }
    return false;
}

What I have tried:

everything is mentioned above and code is also provided