Reputation: 2750
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: 2520
Reputation: 18853
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
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