Question

我在asp.net mvc中使用级联下拉列表。

从第一个下拉列表中选择一个值时，列表将显示在第二个下拉列表中。当我从第二个下拉列表中选择它时，它会显示在下拉列表中，但是在点击提交按钮后它会消失显示＆＃34;从列表中选择＆＃34;。为什么呢？

查看：

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

Answer 1

您没有进行ajax提交。或您没有在发布后设置第二次下拉的值

在您的代码中，在您选择第二个drop dwn并点击提交后，我看不到任何ajax提交。所以问题是你将这个表单发布到控制器，然后控制器返回具有相同发布数据的视图。现在，在第二次下拉的Razor语法中，您正在使用

 @Html.DropDownListFor(model => model.Sect_Id, new List<SelectListItem>(), "Select Form List", new { @class = "form-control select2me", @id = "ddlSect" })

在这里，您可以看到您正在设置空列表new List<SelectListItem>()的第二个下拉值，这就是第二个下拉列表为空的原因。

<强>解决方案

使用AJAX提交表单。这样您的UI保持不变。
将您的Razor语法更改为此

@Html.DropDownListFor(model => model.Sect_Id, Model.District, "Select Form List", new { @class = "form-control select2me", @id = "ddlSect" })

因此添加一个名为附加属性Districts并初步建立起这个Model.District为new List<SelectListItem>()，然后在你的表单POST方法您刚才传回的数据作为接收，它会被渲染提交后正确。

从asp.net mvc中的第二个下拉列表中选择值后，第二个下拉列表未显示

1 个答案: