0

我有 3 个下拉菜单。1. 选择国家 2. 选择学校 3. 选择课程。

我有以下代码：

$(function () {
    $("#CountriesID").change(function () {
        $.getJSON("/Account/SchoolList/" + $("#CountriesID").val(), function (data) {
            var items = "<option>Select your school</option>";
            $.each(data, function (i, school) {
                items += "<option value='" + school.Value + "'>" + school.Text + "</option>";
            });
            $("#Schools").html(items);
        });
    });

    $("#Schools").change(function () {
        $.getJSON("/Account/CourseList/" + $("#Schools").val(), function (data) {
            var items = "<option>Select your Course</option>";
            $.each(data, function (i, course) {
                items += "<option value='" + course.Value + "'>" + course.Text + "</option>";
            });
            $("#Courses").html(items);
        });
    });
});

这工作得很好。现在，如果有人保存此信息并再次返回他的个人资料页面，我需要将保存的值显示为选定选项。

我在 Viewbag 中有保存的 schoolid 和 courseid。但是如何使用该 viewbag 值作为上述代码中的 SELECTED ？

4

2 回答 2

1

演示 jsFiddle

这只是一种方法，还有更多。我还建议您发送国家/地区代码，因为您需要它来填写所有三个下拉菜单。

JS

function GetSchools(country) {
    return $.getJSON("/Account/SchoolList/" + country, function (data) {
        var items = "<option>Select your school</option>";
        $.each(data, function (i, school) {
            items += "<option value='" + school.Value + "'>" + school.Text + "</option>";
        });
        $("#Schools").html(items);
    });
}

function GetCourses(school) {
    return $.getJSON("/Account/CourseList/" + , function (data) {
        var items = "<option>Select your Course</option>";
        $.each(data, function (i, course) {
            items += "<option value='" + course.Value + "'>" + course.Text + "</option>";
        });
        $("#Courses").html(items);
    });
}

function OnSuccess(){
    if('@Html.Raw(ViewBag.courseid)' != '')
    {
        $('#Schools').val(@Html.Raw(ViewBag.courseid));
    }
}

$(function () {
    $("#CountriesID").change(function () {
        //Clears the list of Courses since the Country Changed
        $("#Courses").empty();

        //Gets the list of Schools for the new Country
        GetSchools(this.val());
    });

    $("#Schools").change(function () {
        //Gets the list of Courses for the selected school
        GetCourses(this.val());
    });

    if('@Html.Raw(ViewBag.schoolid)' != '')
    {
        $('#Schools').val(@Html.Raw(ViewBag.schoolid));
        $.when(GetCourses('@Html.Raw(ViewBag.schoolid)')).then(OnSuccess);
    }

});

更新于 2013 年 9 月 17 日下午 4:29

于 2013-09-17T20:23:18.363 回答
0

如果您的代码包含在 中View，您可以编写如下内容：

$(document).ready(function(){
    var schoolID = "@ViewBag.schoolID";
    var courceID = "@ViewBag.courceID";

    $("#Schools option:selected").val(schoolID);
    $("#Course option:selected").val(courceID);
});

如果您将此代码放在单独的 js 文件中，则可以使用隐藏的 div 来获取 ViewBags 数据。

于 2013-09-17T19:16:38.110 回答