CODEWITHSUNDEEP
jqueryhtmlasp.net-mvc
Reza.Hoque
Reza.Hoque

Reputation: 2750

Cascading dropdown selected value

I have 3 dropdowns. 1. Select country 2. Select school 3. select course.

I have the following code for this:

$(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);
        });
    });
});

This is working good. Now, If someone saves this information and come back to his profile page again, I need to show the saved value as selected option.

I have the saved schoolid and courseid in Viewbag. But how do I use that viewbag values as the SELECTED in the above code ??

Upvotes: 0

Views: 2521

Answers (2)

abc123
abc123

Reputation: 18863

Demo jsFiddle

This is only one way of doing this, there are many many more. I also would recommend sending the country code since you'll need that to fill all three drop downs.

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

});

Updated 9/17/2013 4:29PM

Upvotes: 1

Andrey Gubal
Andrey Gubal

Reputation: 3479

If you are having your code in View, you may write something like following:

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

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

If you are having this code in separate js file, you may use hiden divs to get ViewBags data.

Upvotes: 0

Related Questions