进行必要的更改后,所选的选项不会更新

时间:2018-11-09 22:16:33

标签: javascript html

我有一个学期列表下拉列表,当更改(即onChange)时,应调用以下函数,以针对新选择的学期更新学期列表:

function updatesemesterlist() {
    var semesterlist = document.getElementById("semesterdropdown")
    var updatedsemester = semesterlist.value

    while(semesterlist.firstChild) {
        semesterlist.removeChild(semesterlist.firstChild)
    }

    semesterparts = updatedsemester.split(" ")
    var season = semesterparts[0]
    var year = semesterparts[1]

    if (season == "Fall") {
        var ny = parseInt(year, 10)
        ny += 1
        nextyear = ny.toString()

        var py = parseInt(year, 10)
        py -= 1
        prevyear = py.toString()

        addnewoption(semesterlist, "Fall" + " " + nextyear)
        addnewoption(semesterlist, "Spring" + " " + nextyear)
        addnewoption(semesterlist, updatedsemester)
        addnewoption(semesterlist, "Spring" + " " + year)
        addnewoption(semesterlist, "Fall" + " " + prevyear)
    }
    else {
        var ny = parseInt(year, 10)
        ny += 1
        nextyear = ny.toString()

        var py = parseInt(year, 10)
        py -= 1
        prevyear = py.toString()

        addnewoption(semesterlist, "Spring" + " " + nextyear) 
        addnewoption(semesterlist, "Fall" + " " + year)
        addnewoption(semesterlist, updatedsemester)
        addnewoption(semesterlist, "Fall" + " " + prevyear)
        addnewoption(semesterlist, "Spring" + " " + prevyear)
    }

    semesterlist.value = updatedsemester
    retrieveclasses(updatedsemester)
}

上面的函数调用retrieveclasses(semester)函数,该函数将根据存储在地图结构中的数据更新选择的选项列表:

function retrieveclasses(semester) {
    classes = semestertoclasses.get(semester)

    var table_body = document.getElementById("table of classes").children[1]
    while(table_body.firstChild){
        table_body.removeChild(table_body.firstChild)
    }

    console.log(classes)
    if(classes != undefined ){
        var count = 1
        for(var key of Array.from(classes.keys())){
            addclass()
            var course = document.getElementById("course-select" + (count.toString()))
            course.value = key
            course.options[course.options.selectedIndex].selected = true
            var requirement = document.getElementById("requirement-select" + (count.toString()))
            requirement.value = classes.get(key)
            requirement.options[requirement.options.selectedIndex].selected = true
            count++
        }
    }

}

供参考,使用以下功能更新地图:

function saveclasses(){
    var table_body = document.getElementById("table of classes").children[1]
    var num_classes = table_body.childElementCount
    var semester = document.getElementById("semesterdropdown").value

    var courses = table_body.children

    var classtorequirement = new Map();

    for (var i = 0; i < courses.length; i++){
        var data = courses[i].children
        classtorequirement.set(data[0].firstChild.children[3].innerHTML, 
                                data[1].firstChild.children[3].innerHTML)
    }

    semestertoclasses.set(semester, classtorequirement)

}

semestertoclasses最初在我的javascript文件的顶部定义的地方:

var semestertoclasses = new Map();

现在,假设我更新了我想在“ 2018秋季”学期上的课程,然后使用“保存课程”按钮保存这些课程: Fall 2018 Courses

然后我去上一个新学期: Spring 2019

当我回到“ 2018年秋季”时,应该使用我最初保存的课程(CS 2800和MATH 2940以及它们满足的相应要求)来更新课程。然而,这种情况并非如此: After going back to Fall 2018

我通过确保所选索引正确(即通过将options.selectedIndex记录到控制台)来调试此问题,并且确实是正确的。但是这些类不会更新。

我很难确定可能导致此问题发生的原因。我感谢任何建议,谢谢!

0 个答案:

没有答案