1

Grade値のドロップダウンがあります

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

ドロップダウンの選択変更時に、ドロップダウンの値をStudentロードする必要があります。

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"]

すべての成績と生徒を（jsファイルの）単一の配列に保持できますか？はいの場合、JavaScriptで変更された選択されたインデックスの値のみを配列からロードするにはどうすればよいですか？

説明に追加するために、私のコードはHTMLであるため、コントロールは次のとおりです。 

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

変更：

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

ドロップダウンをロードするには：

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

2 に答える 2

1

本当に1つの配列だけが必要な場合は、それらすべてをオブジェクトの配列に保持できます。

var studentsByGrade = [ 
    { "grade": "a", "name": "Anna" }, 
    { "grade": "a", "name": "Hannah" }, 
    { "grade": "b", "name": "Billy" }, 
    { "grade": "b", "name": "Cathy" }, 
    { "grade": "c", "name": "Albert" }, 
    { "grade": "c", "name": "Deepti" }
];

これを使用して、＃gradeドロップダウンにデータを入力します。

for (var i=0;i<studentsByGrade.length;i++) {
    if ($("#grade option[value='+"studentsByGrade[i].grade"+']").length === 0) {
        $("#grade").append("<option value='"+studentsByGrade[i].grade+'>"+studentsByGrade[i].grade+"</option>");
    }
}

これを変更ハンドラーとして#gradeドロップダウンに配置します。

$("#grade").on('change', function() {
    var grade = this.value;        
    students.innerHTML = "";
    for (var i=0;i<studentsByGrade.length;i++) {
        if (studentsByGrade[i].grade == grade) {
            $("#student").append("<option value='"+studentsByGrade[i].name+'>"+studentsByGrade[i].name+"</option>");
        }
    }
});
于 2012-10-19T15:43:07.740 に答える
1

オブジェクトを使用する：

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

ドロップダウン値が変更されたら、その新しい値を使用して、使用する名前を検索します。

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

すべてを言い終えると、次のようになります。

// 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);​
于 2012-10-19T15:17:21.417 に答える