下拉菜单和javascript表单更改

我正在尝试根据下拉选择更改一些表单选项。我想我写的javascript是正确的，但我不确定。如果有人至少能给我指出正确的方向，或者有更好的方法来完成同样的事情，那也不错。我是javascript的新手

这是代码

<form method="post">
    <div class="row requiredRow">
        <label for="ClassName" id="ClassName-ariaLabel">Class Name:</label>
        <input id="ClassName" name="ClassName" type="text" aria-labelledby="ClassName-ariaLabel" class="required" title="Class Name:. This is a required field">
    </div>
    <div class="row">
        <label for="ProfessorName" id="ProfessorName-ariaLabel">Professor Name:</label>
        <input id="ProfessorName" name="ProfessorName" type="text" aria-labelledby="ProfessorName-ariaLabel">
    </div>
    <div class="row requiredRow">
        <label for="GradingScale" id="GradingScale-ariaLabel">Grading Scale:</label>
        <select id="GradingScale" name="GradingScale" aria-labelledby="GradingScale-ariaLabel" class="required" title="Grading Scale:. This is a required field">
            <option value="1">A,A-,B+,B,B-,C+,C,C-,D+,D,D-,F</option>
            <option value="2">A,B,C,D,F</option>
        </select>
    </div>
    <div class='grades'>
        <script>
            var e = document.getElementById("GradingScale");
            var scale = e.options[e.selectedIndex].value;

            if (scale = 2) {
                document.write("<p>Grading Scale:</p><br />");
                document.write("A: <input type='text' name='grade-a'><br />");
                document.write("B: <input type='text' name='grade-b'><br />");
                document.write("C: <input type='text' name='grade-c'><br />");
                document.write("D: <input type='text' name='grade-d'><br />");
                document.write("F: <input type='text' name='grade-f'><br />");
            } else if (scale = 1) {
                document.write("<p>Grading Scale:</p><br />");
                document.write("A: <input type='text' name='grade-a'><br />");
                document.write("A-: <input type='text' name='grade-a-'><br />");
                document.write("B+: <input type='text' name='grade-b+'><br />");
                document.write("B: <input type='text' name='grade-b'><br />");
                document.write("B-: <input type='text' name='grade-b-'><br />");
                document.write("C+: <input type='text' name='grade-c+'><br />");
                document.write("C: <input type='text' name='grade-c'><br />");
                document.write("C-: <input type='text' name='grade-c-'><br />");
                document.write("D+: <input type='text' name='grade-d+'><br />");
                document.write("D: <input type='text' name='grade-d'><br />");
                document.write("D-: <input type='text' name='grade-d-'><br />");
                document.write("F: <input type='text' name='grade-f'><br />");
            }
        </script>
    </div>
    <div class="row">
        <input type="submit" value="Add Class">
    </div>
</form>

类名：
教授姓名：
评分表：
A、 A-，B+，B，B-，C+，C-，D+，D-，F
A、 B、C、D、F
var e=document.getElementById（“GradingScale”）；
var scale=e.options[e.selectedIndex]。值；
如果（比例=2）{
文件。写（“评分标准：

”）；
文件。写入（“A:
”）；
文件。写（“B:
”）；
文件。写（“C:
”）；
文件。写入（“D:
”）；
文件。写入（“F:
”）；
}否则，如果（比例=1）{
文件。写（“评分标准：

”）；
文件。写入（“A:
”）；
文件。写（“A-：
”）；
文件。写（“B+：
”）；
文件。写（“B:
”）；
文件。写（“B-：
”）；
文件。写（“C+：
”）；
文件。写（“C:
”）；
文件。写（“C-：
”）；
文件。写入（“D+：
”）；
文件。写入（“D:
”）；
文件。写（“D-：
”）；
文件。写入（“F:
”）；
}

首先，你应该看看Ashwin提供的建议

不过，您可以按如下所示修改当前代码以暂时使用。（）

JS变化

我已将您的整个脚本移动到函数

scaleChange

。这将使您更容易在更改选项时调用脚本

避免使用

文档。写
行，这不是一个好的做法，因为当再次调用时，它们会重新绘制页面

=

是赋值运算符，而不是比较运算符。您应该在If/Else If语句中使用

=

或

=

来比较值

我添加了一个

窗口。onload

行根据下拉列表中的默认选择值填充

成绩

div

将修改后的代码放入

标签中，并将其放入

标签中

HTML更改

我已经在select标签中添加了一个

onChange

属性。这将使得无论何时更改所选选项，都会调用

scaleChange

函数

通过向第一个选项添加

selected

属性，我将其作为默认的选中选项

JS代码

function scaleChange() {
    var e = document.getElementById("GradingScale");
    var scale = e.options[e.selectedIndex].value;
    var gradeDiv = document.getElementsByClassName("grades")[0];
    if (scale == 2) {
        gradeDiv.innerHTML = "<p>Grading Scale:</p><br />";
        gradeDiv.innerHTML += "A: <input type='text' name='grade-a'><br />";
        gradeDiv.innerHTML += "B: <input type='text' name='grade-b'><br />";
        gradeDiv.innerHTML += "C: <input type='text' name='grade-c'><br />";
        gradeDiv.innerHTML += "D: <input type='text' name='grade-d'><br />";
        gradeDiv.innerHTML += "F: <input type='text' name='grade-f'><br />";
    } else if (scale == 1) {
        gradeDiv.innerHTML = "<p>Grading Scale:</p><br />";
        gradeDiv.innerHTML += "A: <input type='text' name='grade-a'><br />";
        gradeDiv.innerHTML += "A-: <input type='text' name='grade-a-'><br />";
        gradeDiv.innerHTML += "B+: <input type='text' name='grade-b+'><br />";
        gradeDiv.innerHTML += "B: <input type='text' name='grade-b'><br />";
        gradeDiv.innerHTML += "B-: <input type='text' name='grade-b-'><br />";
        gradeDiv.innerHTML += "C+: <input type='text' name='grade-c+'><br />";
        gradeDiv.innerHTML += "C: <input type='text' name='grade-c'><br />";
        gradeDiv.innerHTML += "C-: <input type='text' name='grade-c-'><br />";
        gradeDiv.innerHTML += "D+: <input type='text' name='grade-d+'><br />";
        gradeDiv.innerHTML += "D: <input type='text' name='grade-d'><br />";
        gradeDiv.innerHTML += "D-: <input type='text' name='grade-d-'><br />";
        gradeDiv.innerHTML += "F: <input type='text' name='grade-f'><br />";
    }
}

window.onload = scaleChange;

---

此代码可以优化100倍如何优化？1。您似乎没有针对

select

标记的onChange事件来根据选择修改

grades

内容。2.当前的脚本将仅在加载时执行一次。3.您没有下拉列表的任何默认选定值。@user2363217对循环和数组使用

，而不是对整个表单进行硬编码。如何添加该值以使其工作？如果你只是举个例子就好了。
    <select id="GradingScale" name="GradingScale" aria-labelledby="GradingScale-ariaLabel" 
            class="required" title="Grading Scale:. This is a required field" 
            onChange='scaleChange();'>
        <option value="1" selected>A,A-,B+,B,B-,C+,C,C-,D+,D,D-,F</option>
        <option value="2">A,B,C,D,F</option>
    </select>