Question

I have a dropdown Grade with values

["a", "b", "c"]

On selection change of dropdown, the values of Student dropdown should be loaded.

when "a" is selected, Dropdown students should populate ["Anna", "Hannah"]
When "b" is selected, Dropdown students should populate ["Billy", "Cathy"]
When "c" is selected, Dropdown students should populate ["Albert", "Deepti"]

Can we keep all the grades and students in single array(in js file)? If yes, how can I load only those values on selected index changed in javascript from the array ?

To add to the description, my code is in HTML, so my controls are:

 <select id="grade" name="grade"></select>
 <select id="student" name="student"></select>

Modified :

    var grades_rank;
    var grades_student;
    var grades = {     "very good": ["Anna", "Hannah"],     "good":
 ["Billy", "Cathy"],     "above average": ["Albert", "Deepti"] }  ;

To load the dropdown:

for (var _i = 0; _i < grades.length; _i++) {
            jQ('#Stu_Grades').append(jQ("<option></option>").attr("value", _i).text(grades[_i][grades_rank]));
        }

Answer 1

Use an object:

var grades = {
    a: ["Anna", "Hannah"],
    b: ["Billy", "Cathy"],
    c: ["Albert", "Deepti"]
}

When the dropdown value changes, use its new value to lookup the names you want to use:

grades[a]; // ["Anna", "Hannah"]
grades[b]; // ["Billy", "Cathy"]

When all is said and done, it might look something like the following:

// Lookup chart for grades and students
var grades = {
    a: ["Anna", "Hannah"],
    b: ["Billy", "Cathy"],
    c: ["Albert", "Deepti"]
}

// Reference our dropdown lists
var grade = document.getElementById("grade");
var student = document.getElementById("student");

// Add an event handler to the 'change' event on our grades
grade.addEventListener("change", function(){
    // A few variables we'll use
    var option, g, c, i;
    // Clear student list
    while ( c = student.firstChild ) student.removeChild( c );
    // If the new value is a grade in our lookup
    if ( g = grades[ this.value ] ) {
        // Populate student list
        for ( i = 0; i < g.length; i++ ) {
            option = document.createElement("option");
            option.text = g[i];
            student.appendChild(option);
        }
    }
}, false);​